使用jquery addClass管理菜单&；下课

我正在创建一个导航，它有三种状态。正常、翻转和选定

每个按钮在所有3种状态下都有不同的图像。

我想用jQuery实现这一点

状态1和状态2我可以用单独的类显示

.boy1 a {background-image:...}
.boy1 a:hover {background-image:...}
.boy2 a {background-image:...}
.boy2 a:hover {background-image:...}
.boy3 a {background-image:...}
.boy3 a:hover {background-image:...}

但当你们点击按钮时，它会显示一个包含其名称或任何其他图像的DIV

e、 g

但现在我的问题是，如果有人早些时候点击其他按钮#boy1 DIV应该隐藏，如果你点击.boy2那么#boy2 show和其他#boy1或#boy3应该隐藏

HTML部分：

<div id="navigation">
    <div class="boy1"><a href="#section1"></a></div>
    <div id="boy1">MR ABC</div>

    <div class="boy2"><a href="#section2"></a></div>
    <div id="boy2">MR XYZ</div>

    <div class="boy3"><a href="#section3"></a></div>
    <div id="boy3">MR LALOLA</div>
</div>

<style type="text/css">
    .boy1 a { background-image:images/boy1.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy1 a:hover { background-image:images/boyimage1.gif;}
    #boy1 {position:absolute; top:100; left:50; height:30px; width:60px;}

    .boy2 a { background-image:images/boy2.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy2 a:hover { background-image:images/boyimage2.gif;}
    #boy2 {position:absolute; top:100; left:200; height:30px; width:60px;}

    .boy3 a { background-image:images/boy3.gif; display:block; cursor:pointer; height:100px; width:50px}
    .boy3 a:hover { background-image:images/boyimage3.gif;}
    #boy3 {position:absolute; top:100; left:350; height:30px; width:60px;}
</style>

ABC先生
XYZ先生
拉洛拉先生
.boy1 a{背景图像：images/boy1.gif；显示：块；光标：指针；高度：100px；宽度：50px}
.boy1a:hover{background image:images/boyimage1.gif；}
#boy1{位置：绝对；顶部：100；左侧：50；高度：30px；宽度：60px；}
.boy2 a{背景图像：images/boy2.gif；显示：块；光标：指针；高度：100px；宽度：50px}
.boy2a:hover{background image:images/boyimage2.gif；}
#boy2{位置：绝对；顶部：100；左侧：200；高度：30px；宽度：60px；}
.boy3 a{背景图像：images/boy3.gif；显示：块；光标：指针；高度：100px；宽度：50px}
.boy3 a:hover{background image:images/boyimage3.gif；}
#boy3{位置：绝对；顶部：100；左侧：350；高度：30px；宽度：60px；}

如果我理解正确，当您单击

.boy1

元素时，您希望显示

#boy1

div，如果您单击

.boy2

元素，它应该显示

#boy2

div，但隐藏其他男孩div

我假设你的boy1或boy2元素只有一个类

如果是的话，你可以试试这个

$(".boy1, .boy2, .boy3").click(function() {
   var self = this;
   $('[id^=boy]').hide();
   $("#"+self.className).show("slow");
});

HTML

​

添加

$（'.showhidediv'）.hide（）添加到代码中

我希望这能解决你的问题。如果你有任何问题，请不要犹豫。谢谢
名称从哪里来/放在HTML代码中？下面的图像/名称在选定状态下它将只是一个DIV，它的HTML网站.HTML部分我还没有开始，我先收集所有源代码。但是每个按钮都有自己的DIV，点击它就会看到。我的意思是，#boy1将在.boy1被点击时显示，#boy2将在.boy2被点击时显示，依此类推。谢谢回复：）也请发布你的HTML代码。我很容易回答。我想我现在也弄错了你的问题，看看它是否有助于检查新的答案。我根据你的要求编辑了它。我会试试你的技术，我希望它能隐藏所有其他的“男孩1”或“男孩2”，如果“男孩3”可见的话。等等
$(".boy1, .boy2, .boy3").click(function() {
   var self = this;
   $('[id^=boy]').hide();
   $("#"+self.className).show("slow");
});

<div id="navigation">
    <div class="boy1"><a href="#section1">x</a></div>
    <div id="boy1" class="showhidediv">MR ABC</div>

    <div class="boy2"><a href="#section2">y</a></div>
    <div id="boy2" class="showhidediv">MR XYZ</div>

    <div class="boy3"><a href="#section3">z</a></div>
    <div id="boy3" class="showhidediv">MR LALOLA</div>
</div>​

$(document).ready(function() {

  $('div.boy1').on('click',function(){
    $('div#boy1').siblings('.showhidediv').hide();
    $('div#boy1').show();
});

  $('div.boy2').on('click',function(){
    $('div#boy2').siblings('.showhidediv').hide();
    $('div#boy2').show();
});

   $('div.boy3').on('click',function(){
    $('div#boy3').siblings('.showhidediv').hide();
    $('div#boy3').show();
});

});