1

最初の行で別のボタンがクリックされ、2 番目の行で別のボタンがクリックされた場合、2 番目と 3 番目の行のすべてのボタンを非表示にする方法は、その列のボタンを非表示にし、クリックされた列のボタンを表示します? ウェブサイトで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

0

これは非常に悪い習慣ですが、解決策は次のとおりです。

これが機能するには jQuery が必要なので、どのオプションを使用するにしても、このスクリプトの前に jQuery をロードする必要があります。

これをタグ内の script タグに入れます。または、ドキュメントの準備が整った別の JavaScript ドキュメントで:

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

よりエレガントでスムーズなソリューションについては、私に連絡してください

于 2013-08-24T07:18:11.700 に答える