1. 首頁
  2. 問答
  3. 隱藏分區並顯示一個新的單擊

隱藏分區並顯示一個新的單擊

2017-09-29 44 views
4

感謝您在此查看。我搜索了幾個小時，找不到適合我的問題的解決方案。我有一個固定標題中的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/

來源

2017-09-29 loudenw

+0

你可以提供一個小提琴？ – clarkoy

+0

請同時添加所需的任何外部資源，以便小提琴準確反映您的問題。 – scooterlord

回答

1

你可以改變你的JS是像下面。基本上，代碼會將hidden類添加到所有divs，其中ID爲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>

來源

2017-09-29 02:32:46

+0

這個問題完美解決了，謝謝 – loudenw

0

的問題是，你是不是隱藏所有的其他的div jQuery中

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

來源

2017-09-29 02:27:53

0

補充了第一個答案，還有在html防止JS從功能未關閉divs。下面的代碼片段工作。

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>

來源

2017-09-29 02:33:56 jfeferman

0 

"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

來源

2017-09-29 02:40:57 zhuravlyov

0

你需要隱藏所有，然後再展示一個你要。我已經使用了通用的jQuery，但是您可以使用引導程序的摺疊功能。

$('.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>

來源

2017-09-29 02:41:30

相關問題

 相關問題