Javascript 隐藏一个Div并单击显示一个新Div

谢谢你看这个。我搜索了几个小时，找不到适合我问题的解决方案。我有5个导航链接在一个固定的标题。点击一个链接就可以了；链接显示隐藏的内容。问题是当尝试转到第二个链接时。第一个链接的内容不会消失，第二个链接的内容显示在第一个链接的内容下方。我需要在单击新链接时隐藏第一个链接的内容。不确定这是否重要，但我正在使用引导。这是我的密码：

函数切换器（divId）{
$（“#”+divId）.toggle（）；
}

问题是您没有在jquery中隐藏所有其他div

1） 向每个需要切换的div添加一个类

2） 在js中，隐藏该类的所有div

新的html将是：

<div class="row">
        <div class="col">
            <a href="#" onclick="toggler('slide1');">slide 1</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide2');">slide 2</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide3');">slide 3</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide4');">slide 4</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide5');">slide 5</a>
        </div>
</div>

<div class="container">
        <div id="slide1" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div

        <div id="slide2" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>

        <div id="slide3" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>

        <div id="slide4" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>

        <div id="slide5" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>
</div>

您可以将JS更改为如下所示。基本上，代码会将
hidden
类添加到id为
slide*
的所有
div
，并排除当前单击的
slide
，然后为单击的幻灯片切换类
hidden

function toggler(divId) {
  $("[id*='slide']").not($("#" + divId)).addClass("hidden");
  $("#" + divId).toggleClass("hidden");
}


函数切换器（divId）{
$（“[id*='slide']”）。不是（$（“#”+divId））.addClass（“隐藏”）；
$（“#”+divId）.toggleClass（“隐藏”）；
}

111
111
222
222
333
333
444
444
555
555
补充第一个答案，html中存在未关闭的
div
，阻止js正常工作。下面的代码片段很有效


函数切换器（divId）{
$（“.slide”）.hide（）；
$（“#”+divId）.show（）；
}
img{
宽度：20px；
高度：20px；
边框：1px纯黑；
}
.幻灯片{
显示：无；
}

1.
2.
3.
4.
5.
您可以在切换操作之前添加此代码

    $('[id^="slide"]').hide();

或者你可以检查这个答案

“严格使用”；
让menu=document.querySelector（'.row'）；
让menuItems=document.querySelector（'.container'）；
让sliders=menuItems.querySelectorAll（'div.hidden'）；
menu.addEventListener（“单击”，显示菜单）；
功能显示菜单（事件）{
event.preventDefault（）；
让target=event.target；
如果（target.tagName！==“A”）{
返回；
}
让slide=target.getAttribute（'data-slide'）；
让slided='#'+滑动；
让currentSlider=menuItems.querySelector（slided）；
让currentClass=currentSlider.className；
for（设i=0，max=sliders.length；i

。隐藏{
显示：无；
}

111
111
222
222
333
333
444
444
555
555
您需要先隐藏所有内容，然后显示所需内容。我已经使用了通用jQuery，但您可以使用引导的折叠函数


$（'.slide toggle'）。单击（函数（）{
变量$this=$（this）
$（'.slide'）.hide（）.filter（函数（）{return$（this.data（'slide'）====$this.data（'toggle'）））.show（）
})
。幻灯片{
填充：10px；
显示：无；
}

放映幻灯片1
放映幻灯片2
放映幻灯片3
幻灯片1
幻灯片2
幻灯片3
您能提供小提琴吗？请添加所需的外部资源，以便小提琴准确反映您的问题。
    $('[id^="slide"]').hide();