单击即可隐藏Div并显示新的Div

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<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>


   

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/LLd4sfc9/

Answer 1

您可以将JS更改为如下所示。基本上，代码会将hidden类添加到ID为divs的所有slide*，并排除点击的当前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>

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();
}

Answer 3

补充第一个答案，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>

Answer 4

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

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

或者您可以查看此答案 sign the message

Answer 5

＆＃13;

＆＃13;

"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 = '';
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

纯JS中的另一个例子

Answer 6

您需要先隐藏所有内容，然后显示所需的内容。我使用了通用的jQuery，但你可以使用bootstrap的崩溃函数。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;