jQuery悬停显示div切换 [英] jQuery hover show div toggle

问题描述

我在这个非常简单的网站上工作，但是因为我用jQuery搞乱了一段时间，我想我在这里做错了什么。

可以用jsFiddle预览想法 http://jsfiddle.net/rGb34/1/

jQuery有几个问题。

1. 如果您将鼠标悬停在黄色按钮上，黄色内容开始切换。


2. 如果您将鼠标悬停在某个按钮上，然后退出，div会消失（由于切换功能），但是我希望即使有没有悬停。

有没有人对我有好的提示，所以我可以完成这项工作？首先：不要与其他标签使用相同的id名称。在你的例子中它是id =slider。

这里是jsFiddle玩（我也编辑了你的html和css）

你可以这样做，更坚实：

>

jQuery：

  jQuery（document）.ready（function（）{
 
'（'。greenC，.blueC，.orangeC'）。hide（）; 
 
 $（'。nav li'）。hover（function（）{
 var takeClass = $（this）.attr（'class'）; 
 //需要类占用的元素例如：'.yellow'
 
 $（'。slider'）。 hide（）; 
 $（'。'+ takeClass +'C'）。show（）; //显示元素'.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>授权< / a>< / li> 
< li class =blue>< a href =./class =b_button>付款处理< / a>< / li> 
< li class =orange>< a href =./class =o_button>电子区域代码< / a>< / li> 
< / ul> 
< / div> 
  

I'm working on this pretty easy site but it's been a while since I fiddled with jQuery and I think I'm doing something wrong here.

Here you can preview the idea with jsFiddle http://jsfiddle.net/rGb34/1/

There are a few problems with the jQuery.

1. If you hover over the yellow button the yellow content starts toggling.
2. If you hover over a button and then back off it the div disapears (due to the toggle function) but I would like to have the last div active even when there's no hover.

Does anyone have a good tip for me so I can finish this?

解决方案

First of all: Don't use same id name with another tag. In your example it was id="slider" .

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

You can do that with this way, much more solid:

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

});​

And your html should be like this:

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

这篇关于jQuery悬停显示div切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！