0

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

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

jQuery 存在一些问题。

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

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

4

3 回答 3

3

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

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

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

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>​
于 2012-07-30T16:04:58.477 回答
0

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

于 2012-07-30T15:59:06.870 回答
0

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

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

演示

于 2012-07-30T16:16:05.163 回答