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>。前2个菜单元素只有IDs，而在脚本中使用

.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使用您的代码＆lt; - 已添加IDs并更正后的脚本show/hide

Answer 2

如果你要这样做（通过给div多个类名），你应该首先在上面的javascript中使用.hide函数，并且你的.show总是第二个。发生什么事情是你显示所有名称为 box4 的元素，但是然后隐藏所有类名为 box 的元素，其中包括box4和其他后来的div，所以你展示它，但然后让它隐藏在右后。

希望这有帮助

如何根据菜单选择更改div

2 个答案: