0

垂直メニューがあります。最初のメニューをクリックすると、対応する div が右側に表示されます。2 つの div が可能ですが、他はできません。どうすればよいですか? スクリプトは

$(function() {
    $(".box").hide();
    $("#master").click(function(){
        $("#leftpanel").show();
        $(".box1").show();
    });
    $("#country").click(function(){
        $(".box").hide();
        $(".box1").show();
    });
    $("#currency").click(function(){
        $(".box").hide();
        $(".box2").show();
    });
    $("#city").click(function(){
        $(".box").hide();
        $(".box3").show();
    });
    $("#EmissionsCountry").click(function(){
        $(".box4").show();
        $(".box").hide();
    });
    $("#EmissionsFuel").click(function(){
        $(".box5").show();
        $(".box").hide();
    });
    $("#IfcIndustrySector").click(function(){
        $(".box6").show();
        $(".box").hide();
    });
    $("#ReTechnologyType").click(function(){
        $(".box7").show();
        $(".box").hide();
    });
    $("#Unit").click(function(){
        $(".box8").show();
        $(".box").hide();
    });
    $("#Energy").click(function(){
        $(".box9").show();
        $(".box").hide();
    });

});

HTMLは

<div id="container">
    <div id="leftpanel">
        <div id="menu1">
            <div>
                <a href="#" class="menu1" id="country"> Country</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1" id="currency"> Currency</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1"> City</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1"> EmissionsCountry</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1"> EmissionsFuel</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1"> IfcIndustrySector</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1"> ReTechnologyType</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1"> Unit</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
        <div id="menu1">
            <div>
                <a href="#" class="menu1"> Energy</a>
            </div>
            <div class="imagediv">
                <div class="image"><img src="arrow.gif"/></div>
            </div>
        </div>
    </div>
    <div id="rightpanel">
        <div class="box1 box" id="country">
            country
        </div>
        <div class="box2 box" id="currency">
            currency
        </div>
        <div class="box3 box" id="city">
            city
        </div>
        <div class="box4 box" id="EmissionsCountry">
            EmissionsCountry
        </div>
        <div class="box5 box" id="EmissionsFuel">
            EmissionsFuel
        </div>
        <div class="box6 box" id="IfcIndustrySector">
            IfcIndustrySector
        </div>
        <div class="box7 box" id="ReTechnologyType">
            ReTechnologyType
        </div>
        <div class="box8 box" id="Unit">
            Unit
        </div>
        <div class="box9 box" id="Energy">
            Energy
        </div>
    </div>
</div>

FIDDLEからデモを見ることができます

4

2 に答える 2

1

コードを少し変更して追加data-boxしたので、どれを表示するかがわかり.boxます。

フィドル

$(function () {
    $(".box").hide();
    $('.menu1').click(function () {
        var boxid = $(this).data('box');
        $('.box').hide();
        $('.box' + boxid).show();
    });
});

これにより、スクリプトが大幅に簡素化され、変更がより簡単になると思います。

HTML の実際の問題は、にIDs割り当てられていないことです<a>。IDs最初の 2 つのメニュー要素のみがあり、スクリプトで使用します

.show(); // this will show the box you need
.hide(); // but then you hide all the boxes 
         //(even the one you need because it has the class .box)

//Instead use

.hide(); // hide all the boxes
.show(); // show the one you need

あなたのコードでFIDDLE <--追加IDsおよび修正されたスクリプトshow/hide

于 2013-04-27T09:50:45.727 に答える