0

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

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 回答
0

如果你打算这样做（通过给 div 多个类名），你应该在上面的 javascript 中始终将 .hide 函数放在首位，然后将 .show 函数放在第二位。发生的事情是你显示了所有类名为box4的元素，然后隐藏了所有类名为box的元素，其中包括 box4 和其他后来的 div，所以你显示它，然后让它隐藏 RIGHT 之后.

希望这可以帮助

于 2013-04-27T09:33:55.483 回答