用jquery做横向选项卡，遇到的问题

左边是li导航栏,右边是对应的div
用jquery实现hover，在li标签上让对应的div显示，现在遇到的问题是鼠标不能移动到div上，因为只要移动出li，相应的div就会隐藏。你们平时都是怎么做的？

---

div塞在li里，就是这个思路。代码自己想，哈哈。

---

当鼠标移动到li上时修改对应的div为可见，并且隐藏其它div，不知道你的代码是怎么写的，这里给你个参考
dom结构：

<div>
    <ul>
        <li class="menu hover"><a href="#">Tab1</a></li>
        <li class="menu"><a href="#">Tab2</a></li>
        <li class="menu"><a href="#">Tab3</a></li>
    </ul>
</div>
<div>
    <div class="nav" style="">Label1</div>
    <div class="nav" style="display:none;">Label2</div>
    <div class="nav" style="display:none;">Label3</div>
</div>

jQuery代码：

jQuery(document).ready(function() {
    var index = jQuery(this).index();
    jQuery(".menu").hover(function() {
        jQuery(".menu").eq(jQuery(this).index()).addClass("hover").siblings().removeClass('hover');
        jQuery(".nav").hide().eq(jQuery(this).index()).show();
        return false;
    });
});

---

两种办法:
1.右边的div放进对应的li标签里。
2.加定时器，鼠标从li移出div延迟消失。

---

左边的导航栏和右边的div 布局分开也是可以的。
当从当前的li 移动到对应的div时，做个延时就ok了

---

把div放到li里面，并设置div的position 为absolute，当然，同时也需要设置一下div的父元素不能是position:static。试试看

---

把大的div放到li里，然后加绝对定位，其它的保持不变。这样的话，你的鼠标在div里的时候，就不算是移出li了。

---

应该不需要js

https://jsfiddle.net/kz_dsf/e...

---

hover时 令li对应的右侧div display block 其余的为none