javascript - 切换多个类

Question

我想将菜单添加到我的网站上。我将我的工作分为:

1. 商业
2. 时尚
3. 音乐
4. 肖像

所以我有一个像上面这样的菜单。当我单击一个部分时，假设是“商业”，我希望显示所有其他部分:无。

看看这个 FIDDLE:http://jsfiddle.net/bfevLsj2/8/

$(document).ready(function() {
    $("#commercial").click(function() {
        $(".commercial").toggleClass("show");
        $(".fashion").toggleClass("hid");
        $(".music").toggleClass("hid");
        $(".portrait").toggleClass("hid");
    });
});

Answer 1

你需要siblings()宽度 jquery

Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

$("[id]").click(function(){ //onclick on element with ID
    var selected = $(this).attr("id"); // save the value of that ID
    $("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial"><a href="#">Commercial</a></div>
<div id="fashion"><a href="#">Fashion</a></div>
<div id="music"><a href="#">Music</a></div> 
<div id="portrait"><a href="#">Portrait</a></div><br />

<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>

但是 更好的方法是使用data-*

$("[data-tab]").click(function(){
  var current = $(this).attr("data-tab");
  $("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial"><a href="#">Commercial</a></div>
<div data-tab="fashion"><a href="#">Fashion</a></div>
<div data-tab="music"><a href="#">Music</a></div> 
<div data-tab="portrait"><a href="#">Portrait</a></div><br />

<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>

AGAIN 最好使用纯 javascript

function runClick (event) {
    var current = this.getAttribute("data-tab");
    for( var content = 0; content < dataContent.length; content++) {
      dataContent[content].style.display = "none"
    }
    document.querySelector("[data-content="+ current + "]").style.display = "block"
}

var dataTabs    = document.querySelectorAll("div[data-tab]"),
    dataContent = document.querySelectorAll("div[data-content]");

for(var tab = 0; tab < dataTabs.length; tab++){
   dataTabs[tab].addEventListener("click", runClick , false);
}

<div data-tab="commercial"><a href="#">Commercial</a></div>
<div data-tab="fashion"><a href="#">Fashion</a></div>
<div data-tab="music"><a href="#">Music</a></div> 
<div data-tab="portrait"><a href="#">Portrait</a></div><br />

<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>