1

如果在第一行中单击了不同的按钮并且在第二行中单击了另一个按钮，它将如何隐藏第二行和第三行中的所有按钮，它将隐藏该列的按钮并显示单击的列的按钮? 我正在尝试为我的网站实现类似于http://gazelle.com/的形式，但这对我来说有点困难。

例子：如果我点击“iPhone”——按钮iphone 5、iphone 4s、iphone 4、和iphone 3gs显示，然后点击“iphone 5”——按钮at&t、sprint、verizon、unlocked等显示在第一个下行，然后我改变主意并决定首先单击“平板电脑”，“平板电脑”的按钮出现，但 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>

http://jsfiddle.net/EbbCc/

4

3 回答 3

1

试试这个，我希望它能解决你的要求。 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-24T07:05:12.957 回答
0

试试这个：

<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-24T05:41:18.033 回答
0

这是非常糟糕的做法，但这是解决方案：

您需要 jQuery 才能使其工作，因此无论您决定使用哪个选项，都需要在此脚本之前加载 jQuery。

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

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

Ping 我以获得更优雅和流畅的解决方案

于 2013-08-24T07:18:11.700 回答