javascript - 隐藏一个 Div 并在单击时显示一个新的 Div

Question

感谢您的关注。我已经搜索了几个小时，但找不到适合我问题的解决方案。我在一个固定标题中有 5 个导航链接。单击一个链接可以正常工作；链接显示隐藏内容。问题是在尝试转到第二个链接时。第一个链接的内容并没有消失，第二个链接的内容出现在第一个链接的内容下方。单击新链接时，我需要隐藏第一个链接的内容。不确定这是否重要，但我正在使用 Bootstrap 。这是我的代码:

 function toggler(divId) {
    $("#" + divId).toggle();
    }

<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'>
            <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'>
            <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'>
            <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'>
            <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'>
            <div class="row">
            <div class="col">
                <img src="img.jpg">
            </div>
            <div class="col"> 
                <img src="img.jpg">
            </div>
            </div>
            </div>
    </div>


   

https://jsfiddle.net/LLd4sfc9/

Answer 1

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <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>

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

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

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

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

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