javascript - 如何根据菜单选择更改 div

Question

我有一个垂直菜单。当我点击第一个菜单时，我想在右侧显示相应的 div。可以通过它显示两个 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看到演示

Answer 1

我稍微更改了您的代码并添加了 data-box所以你知道哪个.box你显示。

FIDDLE

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