Javascript 切换多个类

我一直想在我的网站上添加一个菜单。 我的工作分为：

商业的

时尚

音乐

肖像画

所以我有一份上面的菜单。 当我点击一个部分时，让我们说“商业”，我想显示所有其他部分：无

看看这把小提琴：

任何帮助都将不胜感激。 联邦公报。

HTML:

<div id="commercial" class="menuItem"><a href="#">Commercial</a></div>
<div id="fashion" class="menuItem"><a href="#">Fashion</a></div>
<div id="music" class="menuItem"><a href="#">Music</a></div>
<div id="portrait" class="menuItem"><a href="#">Portrait</a></div><br />

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

CSS:

HTML：

<div id="commercial" class="menuItem"><a href="#">Commercial</a></div>
<div id="fashion" class="menuItem"><a href="#">Fashion</a></div>
<div id="music" class="menuItem"><a href="#">Music</a></div>
<div id="portrait" class="menuItem"><a href="#">Portrait</a></div><br />

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

CSS:

---

您可以更轻松地执行以下操作：

<div class="link" id="commercial"><a href="#">Commercial</a></div>
<div class="link" id="fashion"><a href="#">Fashion</a></div>
<div class="link" id="music"><a href="#">Music</a></div>
<div class="link" id="portrait"><a href="#">Portrait</a></div><br />

<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".link").click(function(){
            var id = $(this).attr('id');
            $('.elem').hide();
            $('.' + id).show();
        });
    });

</script>

C
F
M
P
$（文档）.ready（函数（）{
$（“.link”）。单击（函数（）{
var id=$（this.attr（'id'）；
$（'.elem'）.hide（）；
$（'.+id）.show（）；
});
});

您可以更轻松地执行以下操作：

<div class="link" id="commercial"><a href="#">Commercial</a></div>
<div class="link" id="fashion"><a href="#">Fashion</a></div>
<div class="link" id="music"><a href="#">Music</a></div>
<div class="link" id="portrait"><a href="#">Portrait</a></div><br />

<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".link").click(function(){
            var id = $(this).attr('id');
            $('.elem').hide();
            $('.' + id).show();
        });
    });

</script>

C
F
M
P
$（文档）.ready（函数（）{
$（“.link”）。单击（函数（）{
var id=$（this.attr（'id'）；
$（'.elem'）.hide（）；
$（'.+id）.show（）；
});
});

您需要宽度jquery

说明：获取匹配元素集中每个元素的同级，可选地通过选择器过滤

$（“[id]”）。单击（function（）{//onclick on id为的元素
var selected=$（this）.attr（“id”）；//保存该id的值
$（“+selected）.show（）.sides（“[class]”）。hide（）//找到与类具有相同值的类并显示它，然后找到类的所有同级并隐藏它们
})

C
F
M
P

您需要宽度jquery

说明：获取匹配元素集中每个元素的同级，可选地通过选择器过滤

$（“[id]”）。单击（function（）{//onclick on id为的元素
var selected=$（this）.attr（“id”）；//保存该id的值
$（“+selected）.show（）.sides（“[class]”）。hide（）//找到与类具有相同值的类并显示它，然后找到类的所有同级并隐藏它们
})

C
F
M
P

基本上，您可以使用.toggle（）遍历和显示/隐藏，这取决于它是否是您要显示的对象

$(function(){
// find all the links that you can click
    $("div.clickable a").click(
        function(e){
            // when they're clicked, find the identifier of the tab/div you want shown
            var clickedId = $(e.target).parent("div").attr("id");

            // traverse all of the divs and show/hide according to whether it's the tab you want
            $("div.section").each(function(index, div){
                $(div).toggle($(div).hasClass(clickedId));
            });
        });
}); 

以及HTML：

<div id="commercial" class="clickable"><a href="#">Commercial</a></div>
<div id="fashion" class="clickable"><a href="#">Fashion</a></div>
<div id="music" class="clickable"><a href="#">Music</a></div>
<div id="portrait" class="clickable"><a href="#">Portrait</a></div><br />

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

将其添加到可单击div列表后：

<div id="ALL" class="clickable"><a href="#">ALL</a></div>

基本上，您可以使用.toggle（）遍历和显示/隐藏，这取决于它是否是您要显示的对象

$(function(){
// find all the links that you can click
    $("div.clickable a").click(
        function(e){
            // when they're clicked, find the identifier of the tab/div you want shown
            var clickedId = $(e.target).parent("div").attr("id");

            // traverse all of the divs and show/hide according to whether it's the tab you want
            $("div.section").each(function(index, div){
                $(div).toggle($(div).hasClass(clickedId));
            });
        });
}); 

以及HTML：

<div id="commercial" class="clickable"><a href="#">Commercial</a></div>
<div id="fashion" class="clickable"><a href="#">Fashion</a></div>
<div id="music" class="clickable"><a href="#">Music</a></div>
<div id="portrait" class="clickable"><a href="#">Portrait</a></div><br />

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

将其添加到可单击div列表后：

<div id="ALL" class="clickable"><a href="#">ALL</a></div>

你的小提琴很好，那有什么问题吗？@Kartikeya对我来说不太好。如果我点击链接，一切都乱七八糟：）你的小提琴工作得很好，那么有什么问题吗？@Kartikeya对我来说工作得不好。如果我点击链接，一切都乱七八糟：）谢谢你们，现在一切都很好！如果我想添加一个全语音菜单，点击它会再次显示所有的项目？会修改我的答案添加这个！（多德尔）谢谢你们，现在一切都很好！如果我想添加一个全语音菜单，点击它会再次显示所有的项目？会修改我的答案添加这个！（多德）