Question

我可能做错了，如果我点击{“1}}标签上的”sw“和<a>，我需要从所有href="#m1"和{删除”活动“类{1}}标记为“sw”类，但我还需要为所有其他<a>和<div>标记添加“有效”，其类与<a>链接中的href相同，其中我点击了。

多数民众赞成意味着，我需要从href中删除哈希，因为我正在寻找那个不是ID的类。

例如：

<div>

如果我点击CL1，那么我需要从所有sw div和a中删除所有活动，但我还需要addclass“active”到所有div，其中#m1作为class。

我希望你能使我感到不安:(

这是我的2个测试代码......

<a>

Answer 1

请稍等并阅读Decoupling Your HTML, CSS, and 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"）。

Answer 2

<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>

Answer 3

我添加了一个工作示例的plunker。我已经修改了你的代码，但这应该适合你。如果您有任何问题，请与我联系：

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

/代码在这里

/ 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");
  });
});

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

3 个答案: