使用jquery addClass＆amp;管理菜单删除课程

Question

我创建了一个NAVIGATION，它有3个状态。正常，翻转和选择。

每个按钮对于所有3个状态都有不同的图像。

我想用jQuery做这件事。

州1＆amp; 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:...}

但是当你点击BUTTON时，它应该显示一个包含其NAME或任何其他图像的DIV。

e.g。

$(".boy1").click(function() {
  $("#boy1").show("slow");
});

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

HTML PART：

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

Answer 1

如果我理解正确，您希望在点击#boy1元素时显示.boy1 div，如果点击.boy2元素，则应显示#boy2 div但隐藏其他男孩div。，

我假设你的boy1或boy2元素只有一个课程。

如果是，你可以试试这个。

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

Answer 2

HTML

<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>​

JS

$(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();
});

});

check the demo here

如果您想隐藏所有div，请

将$('.showhidediv').hide();添加到您的代码中。

我希望这能解决你的问题。如果您有任何疑问，请随时提出。感谢