jQuery 悬停显示 div 切换

Question

我正在开发这个非常简单的网站，但自从我摆弄 jQuery 以来已经有一段时间了，我认为我在这里做错了。

在这里你可以用 jsFiddle http://jsfiddle.net/rGb34/1/预览这个想法

jQuery 存在一些问题。

1. 如果您将鼠标悬停在黄色按钮上，黄色内容将开始切换。
2. 如果您将鼠标悬停在按钮上，然后将其移开，则 div 会消失（由于切换功能），但我希望即使没有悬停也能激活最后一个 div。

有没有人给我一个好的提示，让我可以完成这个？

Answer 1

首先：不要将相同的 id 名称与另一个标签一起使用。在您的示例中，它是 id="slider" 。

Here is jsFiddle to play with (I have edited your html and css too)

你可以用这种方式做到这一点，更可靠：

jQuery:

jQuery(document).ready(function() {

    $('.greenC, .blueC, .orangeC').hide();

    $('.nav li').hover(function() {
        var takeClass = $(this).attr('class');
       // takes class hovered element. example: '.yellow'

        $('.slider').hide();
        $('.'+ takeClass + 'C').show();// shows the element '.yellowC'
    });

});​

你的html应该是这样的：

<div class="yellowC slider">...</div>
<div class="greenC slider">...</div>
<div class="blueC slider">...</div>
<div class="orangeC slider">...</div>

<div class="wrap">
  <ul class="nav">
     <li class="yellow"><a href="./" class="y_button">Fiducairy services</a></li>
     <li class="green"><a href="./" class="g_button">Licensing</a></li>
     <li class="blue"><a href="./" class="b_button">Payment processing</a></li>
     <li class="orange"><a href="./" class="o_button">E-zone colocation</a></li>
   </ul>
</div>​