单击时隐藏一个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/

- loudenw

---

你能提供一个 Fiddle 吗？ - clarkoy

请添加任何必要的外部资源，以便 fiddle 准确反映您的问题。 - scooterlord

Answer 1

您可以将JS更改为以下内容。基本上，该代码将向所有ID为slide*的

添加hidden类，并排除当前点击的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>

- Phani Kumar M

Answer 2

问题在于您没有在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>

而JavaScript将会是

function toggler(divId) {
  // hide all other divs first
  $('.slide').hide();
  $("#" + divId).toggle();
}

- user8106201

Answer 3

你可以在切换操作之前添加此代码。

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

你可以查看这个答案：JQuery：切换被点击的元素并隐藏所有其他元素。

- Iyong Budiarso

Answer 4

补充第一个答案，HTML中存在未关闭的divs，导致JS无法正常工作。下面的代码片段可以解决这个问题。

function toggler(divId) {
  $(".slide").hide();
  $("#" + divId).show();
}

img {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.slide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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='slide'>
    <div class="row">
      <div class="col">
        1<img src="img.jpg">
      </div>
      <div class="col">
        <img src="img.jpg">
      </div>
    </div>
  </div>

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

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

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

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

</div>

- Julio Feferman

Answer 5

"use strict";

let menu = document.querySelector('.row');
let menuItems = document.querySelector('.container');
let sliders = menuItems.querySelectorAll('div.hidden');

menu.addEventListener('click', showMenu);

function showMenu(event) {
    event.preventDefault();

    let target = event.target;

    if (target.tagName !== 'A') {
        return;
    }

    let slide = target.getAttribute('data-slide');
    let slideId = '#' + slide;
    let currentSlider = menuItems.querySelector(slideId);
    let currentClass = currentSlider.className;


    for (let i = 0, max = sliders.length; i < max; i++) {
        sliders[i].className = 'hidden';
    }
    
    if (!currentClass) {
        currentSlider.className = 'hidden';
        return;
    }

    currentSlider.className = '';
}

.hidden {
  display: none;
}

<div class="row">
    <div class="col">
        <a href="#" data-slide="slide1">slide 1</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide2">slide 2</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide3">slide 3</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide4">slide 4</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide5">slide 5</a>
    </div>
</div>

<div class="container">
    <div id="slide1" class='hidden'>
        <div class="row">
            <div class="col">
                111
            </div>
            <div class="col">
                111
            </div>
        </div>
    </div>

    <div id="slide2" class='hidden'>
        <div class="row">
            <div class="col">
                222
            </div>
            <div class="col">
                222
            </div>
        </div>
    </div>

    <div id="slide3" class='hidden'>
        <div class="row">
            <div class="col">
                333
            </div>
            <div class="col">
                333
            </div>
        </div>
    </div>

    <div id="slide4" class='hidden'>
        <div class="row">
            <div class="col">
                444
            </div>
            <div class="col">
                444
            </div>
        </div>
    </div>

    <div id="slide5" class='hidden'>
        <div class="row">
            <div class="col">
                555
            </div>
            <div class="col">
                555
            </div>
        </div>
    </div>
</div>

这里是一个纯JS的例子

- zhuravlyov

Answer 6

你需要先隐藏所有，然后再显示你想要的那个。我已经使用了通用的jQuery，但你也可以使用Bootstrap的折叠功能。

$('.slide-toggle').click(function() {
  var $this = $(this)
  $('.slide').hide().filter(function() { return $(this).data('slide') === $this.data('toggle') }).show()
})

.slide {
  padding: 10px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="slide-toggle" data-toggle="1">Show Slide 1</button>

<button class="slide-toggle" data-toggle="2">Show Slide 2</button>

<button class="slide-toggle" data-toggle="3">Show Slide 3</button>

<div class="slide" data-slide="1">Slide 1</div>

<div class="slide" data-slide="2">Slide 2</div>

<div class="slide" data-slide="3">Slide 3</div>

- Alex Dacre