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