当单击另一个DIV时如何隐藏多个显示/隐藏DIV's

如果在第一行中单击不同按钮并且在第二行中单击另一个按钮时如何隐藏第二行和第三行中的所有按钮将隐藏该列的按钮并显示点击列的按钮？我正在尝试为我的网站获得类似http://gazelle.com/的表格，但对我来说有点困难。例如：如果我点击“iPhone” - 按钮iphone 5，iphone 4s，iphone 4和iphone 3gs显示，然后单击“iphone 5” - 按钮& t，sprint，verizon，unlocked，和其他显示在第一行，然后我改变主意，决定点击“平板电脑”的第一个，“平板电脑”的按钮显示，但从iPhone 5的按钮回去隐藏，但“平板电脑”的按钮显示向上。当单击另一个DIV时如何隐藏多个显示/隐藏DIV's

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

http://jsfiddle.net/EbbCc/

来源

2013-08-24 user2680614

1）创建jsfiddle.net 2）位的jQuery会让你的生活变得更轻松和切换会看更好。这个问题已经在这个网站上独自回答了100次 - 向右看------> – mplungjan

@mplungjan我加了jsfiddle。我已经检查过这个问题，但我无法在任何地方找到它。我不知道jquery。 – user2680614

@mplungjan我看到的全部是“ - mplungjan 10分钟前”。难道我做错了什么？ –

试试这个我希望这将解决您的要求。 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 &amp; 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>

来源

2013-08-24 07:05:12 satheeaseelan

你的救星。谢谢。 – user2680614

每次我添加另一个类时，它会显示错误。为什么？ – user2680614

你能告诉我你在哪里添加，发布更新后的代码。 – satheeaseelan

试试这个：

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

来源

2013-08-24 05:41:18

你能看到我的更新 –

是的。不知道这是全部改进。请“返回showHide ...”并在函数结尾处使用'return false' - 在我看来更优雅的设置类名 – mplungjan

是的。没关系。查看我的更新。但我觉得Jquery更适合这个，Jquery很擅长处理类名。 –

这是SOOO不好的做法，但这里是解决方案：

您需要的jQuery这个工作，所以需要的jQuery这个剧本哪个选项你决定使用之前加载。

把它放在你的标签的脚本标签中。或者在文件准备单独的JavaScript文件：

function showHide(obj) { 
    $('#' + obj).toggle('fast'); 
    console.log('#' + obj); 
}

平我要更优雅流畅的解决方案

来源

2013-08-24 07:18:11 Rastko

你的解决方案是什么？ – user2680614

这将是在单独的js文件中点击事件和showHide事件。然后你会阿贝尔做SMT，如：。 $（“ mainHead”）点击（函数（）{ //检测其主按钮它和基于使用显示隐藏 } 此外，设计灵活性明智，最好不要将所有东西都包装在一张桌子里，而是根据自己的喜好制作无序列表 – Rastko

当单击另一个DIV时如何隐藏多个显示/隐藏DIV's

回答

相关问题