1

左側にサイド ナビゲーションがあり、さまざまな種類の手術が行われています。それらはすべてulにあります。

手術 (ul li) をクリックすると、右側に div が表示され、その特定の手術に関する FAQ が表示されます。ul 内の別のリンクをクリックすると、現在開いている div が非表示になり、クリックしたばかりの div が表示されます。

私はこれを行うことができましたが、同じ ul li リンクをもう一度クリックしたときに FAQ div の表示を切り替えたいと思います。

<html>
<head>
<style>
#popup div { display:none; }
#popup div.show { display:block; }
ul#links li { cursor:pointer;}
</style>
</head>
<body>

    <div class="sidenav">
        <ul id="links">
            <li id="armlift">Arm Lift</li>
            <li id="liposuction">Liposuction</li>
            <li id="tummytuck">Tummy Tuck</li>
            <li id="postgastric">Post-Gastric Bypass Surgery</li>
        </ul>       
    </div>

    <div id="popup">
        <div id="a_armlift">
        <span class="faq_header">Arm Lift</span>
        <p class="treatment_question">What is a an Arm Lift?</p>
            <div class="treatment_answer">This surgery removes excess...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">An incision is made...</div>
    </div>  
        <div id="a_liposuction">
        <span class="faq_header">Liposuction Lift</span>
        <p class="treatment_question">What is a Liposuction?</p>
            <div class="treatment_answer">Liposuction is the removal...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">Ideal candidates for...</div>
    </div>
        <div id="a_tummytuck">
        <span class="faq_header">Tummy Tuck</span>
        <p class="treatment_question">What is a Tummy Tuck?</p>
            <div class="treatment_answer">A tummy tuck tightens...</div>
        <p class="treatment_question">What is a Mini Tummy Tuck?</p>
            <div class="treatment_answer">A mini-tuck is a...</div>
        </div>
        <div id="a_postgastric">
        <span class="faq_header">Post-Gastric Bypass Surgery</span>
        <p class="treatment_question">What is a Post-Gastric Bypass Surgery?</p>
            <div class="treatment_answer">Gastric bypass surgery removes...</div>
        <p class="treatment_question">What should I know?</p>
            <div class="treatment_answer">Each patient has...</div>
    </div>
</div>

<script type="text/javascript">
var links_ul = document.getElementById('links');

for (var i = 0; i < links_ul.children.length; i++) {
    links_ul.children[i].onclick = function(ev) {
        s = document.getElementById('a_' + this.id);
        popup = document.getElementsByClassName('show');
        for (var j = 0; j < popup.length; j++) {
            popup[j].className = '';
        }
        s.className = 'show';
    };
}
</script>

</body>
</html>
4

1 に答える 1

1

これを別の方法で行うことを検討することをお勧めします。この種のことを行うプラグインはたくさんあります。

しかし、ここにあなたの質問への答えがあります: http://jsfiddle.net/6Vku8/1/

for (var i = 0; i < links_ul.children.length; i++) {
    links_ul.children[i].onclick = function(ev) {
        s = document.getElementById('a_' + this.id);
        popup = document.getElementsByClassName('show');
        var shown = s.className == 'show';

        for (var j = 0; j < popup.length; j++) {
            popup[j].className = '';
        }
        s.className = shown ? '' : 'show';
    };
}​

すべての div を非表示にする前に、div が「表示」されているかどうかを確認する必要があります。

于 2012-09-25T17:33:08.433 に答える