單擊另一個DIV時如何隱藏多個顯示/隱藏DIV
[英]How to hide multiple Show/Hide DIV's when another DIV is clicked
問題描述
如果在第一行中單擊了其他按鈕，並且在第二行中單擊了另一個按鈕，則如何隱藏第二行和第三行中的所有按鈕，它將隱藏該列的按鈕並顯示被單擊的列的按鈕？ 我正在嘗試為我的網站實現類似於http://gazelle.com/的形式，但對我來說卻有點困難。
示例：如果我單擊“ iPhone”-顯示iphone 5，iphone 4s，iphone 4和iphone 3gs按鈕，然后單擊“ iphone 5”-at＆t，sprint，verizon，已解鎖以及其他顯示按鈕行，然后我改變主意，決定先單擊“平板電腦”，“平板電腦”的按鈕會顯示出來，但iPhone 5的按鈕會回到隱藏狀態，但“平板電腦”的按鈕會顯示出來。
<!DOCTYPE html>
<html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function showHide(obj) {
var div = document.getElementById(obj);
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
</head>
<body>
<table>
<td>
<a href="#" onclick="showHide('hidden_div'); return false;"><button>iPhone</button></a>
<a href="#" onclick="showHide('q2'); return false;"><button>iPod</button></a>
<a href="#" onclick="showHide('q3'); return false;"><button>Tablet</button></a>
</td>
</table>
<div id="hidden_div" style="display: none;">
<button onclick="showHide('q4'); return false;">iPhone 5</button>
<button>iPhone 4S</button>
<button>iPhone 4</button>
<button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
<button>iPod Touch</button>
<button>iPod Nano</button>
<button>Classic iPod</button>
</div>
<div id="q3" style="display: none;">
<button>iPad</button>
<button>Windows</button>
<button>Nook</button>
</div>
<div id="q4" style="display: none;">
<button onclick="showHide('q'); return false;">AT&T</button>
<button>Sprint</button>
<button>Verizon</button>
<button>Unlocked</button>
<button>Other</button>
</div>
</body>
</html>
3 個解決方案
解決方案1
1 已采納 2013-08-24 07:05:12
試試這個，我希望它能解決您的要求。 http://jsfiddle.net/satheeaseelan/Qf5B3/
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">.categories, .serviceProviders button{ display:none;}</style>
</head>
<body>
<table>
<td>
<a href="#" class="mainHead"><button>iPhone</button></a>
<a href="#" class="mainHead"><button>iPod</button></a>
<a href="#" class="mainHead"><button>Tablet</button></a>
</td>
</table>
<div class="categories">
<button class="iphone5">iPhone 5</button>
<button class="iphone4s">iPhone 4S</button>
<button class="iphone4">iPhone 4</button>
<button class="iphone3gs">iPhone 3GS</button>
</div>
<div class="categories">
<button class="ipodT">iPod Touch</button>
<button class="ipodN">iPod Nano</button>
<button class="ipodC">Classic iPod</button>
</div>
<div class="categories">
<button class="ipad">iPad</button>
<button class="windows">Windows</button>
<button class="nook">Nook</button>
</div>
<div class="serviceProviders">
<button class="iphone5 ipodN iphone4s ipad">AT & T</button>
<button class="nook ipodN iphone3gs ipad">Sprint</button>
<button class="iphone5 iphone4s windows">Verizon</button>
<button class="nook ipodN ipodT ipad iphone4">Unlocked</button>
<button class="iphone5 iphone3gs windows">Other</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.mainHead').each(function(index, element) {
$(this).click(function(){
$('.categories').hide();
$('.serviceProviders button').hide();
$('.categories').eq(index).show();
});
});
$('.categories button').each(function(index, element) {
$(this).click(function(){
var temp = $(this).attr('class');
$('.serviceProviders button').hide();
$('.serviceProviders button').each(function(){
if($(this).hasClass(temp)){
$(this).show();
}
})
});
});
});
</script>
</body>
</html>
解決方案2
0 2013-08-24 05:41:18
嘗試這個：
<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>iPod</button></a>
<a href="#" onclick="showHide(3)"><button>Tablet</button></a>
</td>
</table>
<div id="q1" style="display: none;">
<button onclick="subShowHide('1');">iPhone 5</button>
<button>iPhone 4S</button>
<button>iPhone 4</button>
<button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
<button>iPod Touch</button>
<button>iPod Nano</button>
<button>Classic iPod</button>
</div>
<div id="q3" style="display: none;">
<button>iPad</button>
<button>Windows</button>
<button>Nook</button>
</div>
<div id="qq1" style="display: none;">
<button onclick="subSubShowHide('1');">AT&T</button>
<button>Sprint</button>
<button>Verizon</button>
<button>Unlocked</button>
<button>Other</button>
</div>
<div id="qqq1" style="display: none;">
<button>test1</button>
<button>test2</button>
<button>test3</button>
</div>
<script>
function showHide(obj) {
for(i=1;i<=1;i++){
document.getElementById('qq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=4;i++){
if (i == obj) {
document.getElementById('q'+i).style.display = 'block';
} else {
document.getElementById('q'+i).style.display = 'none';
}
}
return false;
}
function subShowHide(obj){
for(i=1;i<=1;i++){
document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
if (i == obj) {
document.getElementById('qq'+i).style.display = 'block';
} else {
document.getElementById('qq'+i).style.display = 'none';
}
}
return false;
}
function subSubShowHide(obj){
for(i=1;i<=1;i++){
if (i == obj) {
document.getElementById('qqq'+i).style.display = 'block';
} else {
document.getElementById('qqq'+i).style.display = 'none';
}
}
return false;
}
</script>
解決方案3
0 2013-08-24 07:18:11
這是很糟糕的做法，但這是解決方案：
您需要jQuery才能正常工作，因此無論您決定使用哪個選項，都需要在此腳本之前加載jQuery。
將其放在腳本標簽中。 或在准備好文檔的單獨javascript文檔中：
function showHide(obj) {
$('#' + obj).toggle('fast');
console.log('#' + obj);
}
為我提供更優雅，更流暢的解決方案
如何根據在 Vue js 中的另一個 div 中單擊的內容來顯示和隱藏 div？
[英]How can I show and hide a div based on what's clicked in another div in Vue js?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.