Question

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

在这里，您可以使用jsFiddle http://jsfiddle.net/rGb34/1/

预览该想法

jQuery存在一些问题。

如果将鼠标悬停在黄色按钮上，则黄色内容会开始翻转。
如果你将鼠标悬停在一个按钮上然后退出它，则div会消失（由于切换功能）但我希望最后一个div处于活动状态，即使没有悬停也是如此。

有没有人对我有好的建议，所以我可以完成这个？

Answer 1

首先：不要将同一个ID名称与另一个标签一起使用。在你的例子中，它是id =＆＃34; slider＆＃34;

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>

Answer 2

$（'。green，.blue，.orange，.yellow'）。hide（）;如果你也隐藏黄色，它对我来说很好..这就是你想要的吗？

Answer 3

如果您希望第一个div在加载时正确显示，则必须更具体地在.yellow事件处理程序

上

$('.y_active, .yellow').hover(
function() {
    $('.yellow').show();
    $('.green').hide();
    $('.blue').hide();
    $('.orange').hide();
}, function() {
    $('.yellow').hide();
});

DEMO

jQuery悬停显示div切换

3 个答案: