Javascript 从菜单隐藏/显示多个div

我有一个菜单（mainnav）的简单模型设置，当单击其中一个菜单项（menuitem）时，它会显示一个隐藏的div。下面的工作很好，但我想知道是否有一种方法可以组合一些功能

这是我的html：

<div id="mainnav">
<a class="menuitem" id="home" href="#">Home</a>
        <a class="menuitem" id="about" href="#">About</a>
        <a class="menuitem" id="contact" href="#">Contact</a>
</div>

<div id="maincontent">
<div id="slider1_container">
<p>SLIDESHOW_CODE</p>
</div>
<div id="content">
<p class="aboutcontent"><b>ABOUT:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="contactcontent"><b>CONTACT:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="findcontent"><b>FIND:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="find">
            <p><a href="#">Find...</a></p>
</div>
</div>

谢谢

试着这样做：

 $(".findcontent,.contactcontent,#slider1_container").hide();

下面是一个

像这样尝试：

 $(".findcontent,.contactcontent,#slider1_container").hide();

---

以下是您至少可以组合选择器的

：

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        $(".contactcontent, .findcontent, #slider1_container").hide();
        $(".aboutcontent").slideToggle();
    });
    $('#contact').click(function(){
        $(".aboutcontent, .findcontent, #slider1_container").hide();
        $(".contactcontent").slideToggle();
    });
    $('.find').click(function(){
        $(".aboutcontent, .contactcontent, #slider1_container").hide();
        $(".findcontent").slideToggle();
    });
    $('#home').click(function(){
        $(".aboutcontent, .contactcontent, .findcontent").hide();
        $("#slider1_container").slideToggle();
    });
});

或者，对共享代码使用函数：

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        toggle(".contactcontent, .findcontent, #slider1_container", ".aboutcontent");
    });
    $('#contact').click(function(){
        toggle(".aboutcontent, .findcontent, #slider1_container", ".contactcontent");
    });
    $('.find').click(function(){
        toggle(".aboutcontent, .contactcontent, #slider1_container", ".findcontent");
    });
    $('#home').click(function(){
        toggle(".aboutcontent, .contactcontent, .findcontent", "#slider1_container");
    });
});

function toggle(hide, toggle){
    $(hide).hide();
    $(toggle).slideToggle();
}

---

您至少可以组合选择器：

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        $(".contactcontent, .findcontent, #slider1_container").hide();
        $(".aboutcontent").slideToggle();
    });
    $('#contact').click(function(){
        $(".aboutcontent, .findcontent, #slider1_container").hide();
        $(".contactcontent").slideToggle();
    });
    $('.find').click(function(){
        $(".aboutcontent, .contactcontent, #slider1_container").hide();
        $(".findcontent").slideToggle();
    });
    $('#home').click(function(){
        $(".aboutcontent, .contactcontent, .findcontent").hide();
        $("#slider1_container").slideToggle();
    });
});

或者，对共享代码使用函数：

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        toggle(".contactcontent, .findcontent, #slider1_container", ".aboutcontent");
    });
    $('#contact').click(function(){
        toggle(".aboutcontent, .findcontent, #slider1_container", ".contactcontent");
    });
    $('.find').click(function(){
        toggle(".aboutcontent, .contactcontent, #slider1_container", ".findcontent");
    });
    $('#home').click(function(){
        toggle(".aboutcontent, .contactcontent, .findcontent", "#slider1_container");
    });
});

function toggle(hide, toggle){
    $(hide).hide();
    $(toggle).slideToggle();
}

---

您可以尝试在每次单击时隐藏它们，并显示所需的唯一项目

演示：

---

您可以尝试在每次单击时隐藏它们，并显示所需的唯一项目

演示：

---

由于所有带有“content”后缀的元素都在

#content

中，因此您可以通过一次使用

$（“#content”）.children（）.hide（）轻松隐藏所有元素或等效的
$（'#content>*'）。隐藏（）

所有带有“内容”后缀的元素都是唯一的，所以为什么不使用
id
而不是
class
？然后单击，您可以显示链接指向的元素：

HTML:

<a class="menuitem" id="about" href="#aboutcontent">About</a>
...
<p id="aboutcontent"><b>ABOUT:</b>Lorem ipsum dolor sit amet...</p>

$('#mainnav a, .find a').click(function () {
    $('#content').children().hide();
    $($(this).attr('href')).slideToggle();
});


注意：如果您不想使用
id
s或/或更改
href
，则可以像这样选择目标元素：
$（'.+$（this）.attr（'id'）+content.slideToggle（）保持HTML的现状

更新：我没有意识到
#slider1_容器
在
#内容
之外，这里是

更新2:我添加了
.not（）
函数，以避免隐藏实际的目标元素，因此
.slideToggle（）
现在可以正常工作了-
因为您所有的“content”后缀元素都在
的内容中，然后您可以使用
$（'content'）一次轻松隐藏所有元素。children（）.hide（）或等效的
$（'#content>*'）。隐藏（）

所有带有“内容”后缀的元素都是唯一的，所以为什么不使用
id
而不是
class
？然后单击，您可以显示链接指向的元素：

HTML:

<a class="menuitem" id="about" href="#aboutcontent">About</a>
...
<p id="aboutcontent"><b>ABOUT:</b>Lorem ipsum dolor sit amet...</p>

$('#mainnav a, .find a').click(function () {
    $('#content').children().hide();
    $($(this).attr('href')).slideToggle();
});


注意：如果您不想使用
id
s或/或更改
href
，则可以像这样选择目标元素：
$（'.+$（this）.attr（'id'）+content.slideToggle（）保持HTML的现状

更新：我没有意识到
#slider1_容器
在
#内容
之外，这里是

更新2:我添加了
.not（）
函数，以避免隐藏实际的目标元素，因此
.slideToggle（）
现在可以正常工作了-
你能做一个提琴吗？你真的应该花一些时间学习本机javascript。你能做一个提琴吗？你真的应该花一些时间学习本机javascript。