AddClass“active"其中Class与href相同，否则删除“active”

AddClass "active" where Class is same as href, otherwise remove "active"

本文关键字：active 相同 删除 href Class quot 其中 AddClass      更新时间：2023-09-26

我可能做错了，如果我点击<a>标签与类"sw"和href="#m1"，我需要从所有<a>和<div>标签与类"sw"中删除类"active"，但我也需要添加"active"到所有其余的<a>和<div>标签与类相同，在<a>链接，我点击的地方。

这意味着，我需要从href中删除哈希，因为我正在寻找那个类而不是ID。

例如:

<a href="#m1" class="sw">CL1<a/>
<a href="#m2" class="sw active">CL2<a/>
<div class="sw m1>HELLO1</div>
<div class="sw m2 active>HELLO2</div>

如果我点击CL1，那么我需要从所有的swdiv和a中删除所有活动，但我也需要添加类"active"到所有的div和a中，其中是#m1作为类。

我希望你能理解我。

这是我的2个测试代码…

$('a.sw').on('click', function() { 
    var nohash = $(this).attr('href').replace('#', '');
    if ( !$( this ).hasClass( "active" ) ) {
        $('.sw').each(function() { 
            if($(this).hasClass('active')) { 
                $(this).removeClass('active');
            } else { 
                nohash.addClass('active');
            }
        });
    }
});
$( 'a.sw' ).on( 'click', function() {
   $('div.sw').removeClass( 'active' );
   $(this).href().replace('#', '').addClass( 'active' )
});

花点时间阅读解耦你的HTML, CSS和JavaScript - Philip Walton @ Google

基于您当前的代码，您有一个非常高的耦合程度，实际上没有重用您的代码。下面是我将如何重构它:

html: 

<a href="#m1" class="js-sw active" data-sw-target=".sw-target-m1">CL1</a>
<a href="#m2" class="js-sw" data-sw-target=".sw-target-m2">CL2</a>
<div class="sw-target sw-target-m1 active">HELLO1</div>
<div class="sw-target sw-target-m2">HELLO2</div>
Javascript: 

$(document).ready(function() {
  $('.js-sw').on('click', function() {
    $('.sw-target, .js-sw').removeClass('active');
    $(this).addClass('active');
    var selector = $(this).data('sw-target');
    $(selector).addClass('active');
  });
});

现在代码适用于标记为.js-sw的任何内容。您可以将目标选择器更改为任何您想要的选择器，包括多个选择器(例如data-sw-target=".sw-target, .someothertarget")。

你有拼写错误，如<a/>应该是</a>和缺少引号:

<div class="sw m1> 
_________________^
<div class="sw m2 active>
________________________^

应该是:

<div class="sw m1">
<div class="sw m2 active">

如果我理解你的话，点击CL1后你想要的结果应该是这样的:

<a href="m1" class="sw active">CL1</a>
<a href="#m2" class="sw">CL2</a>
<div class="sw m1 active">HELLO1</div>
<div class="sw m2">HELLO2</div>

检查下面的例子，希望能有所帮助。

$('a.sw').on('click', function(e) { 
    e.preventDefault();
  
    var new_href = $(this).attr('href').replace('#', '');
    $(this).attr( 'href' , new_href ); //Remove '#' from href
  
    $('.sw').removeClass('active');
    $('.'+new_href).addClass('active');
    $(this).addClass('active');
});
.active{
   color: green;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#m1" class="sw">CL1</a>
<a href="#m2" class="sw active">CL2</a>
<div class="sw m1">HELLO1</div>
<div class="sw m2 active">HELLO2</div>

我已经添加了这个柱塞的工作示例。我修改了你的代码，但这应该为你工作。如果您有任何问题，请告诉我。

http://plnkr.co/edit/BQXXGd6IXPg2mCxqzFJv?p =

预览

/代码到这里

/ Code goes here
$(function(){
  $('a.sw').on('click', function() { 
    var nohash = $(this).attr('href').replace('#', '');
    var $nohashElement = $('.' + nohash);
    console.log($nohashElement);
    $('.sw').removeClass('active');
    $(this).addClass('active');
    $nohashElement.addClass("active");
  });
});

相关文章：