0

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

每个按钮对于所有 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:...}

但是当您单击 BUTTON 时，它应该显示一个包含其名称或任何其他图像的 DIV。

例如

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

但现在我的问题是，如果有人之前点击其他按钮 #boy1 DIV 应该隐藏，如果你点击 .boy2 那么 #boy2 show 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>
4

2 回答 2

1

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

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

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

$(".boy1, .boy2, .boy3").click(function() {
   var self = this;
   $('[id^=boy]').hide();
   $("#"+self.className).show("slow");
});
于 2012-09-27T09:10:03.490 回答
1

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

});

​<a href="http://jsfiddle.net/Kxgh2/" rel="nofollow">在这里查看演示

$('.showhidediv').hide();如果您想从隐藏所有 div 开始，请添加到您的代码中。

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

于 2012-09-27T09:10:27.350 回答