jquery 下拉菜单

发布网友 发布时间：2022-05-10 22:57

我来回答

共2个回答

热心网友 时间：2022-04-22 19:52

<script type="text/javascript">
var timeoutId;
$(function ()
{
$("#menu li").each(function (index)
{
$(this).mouseover(function ()
{
timeoutId = setTimeout(function ()
{
//将所有样式为contentShow的移除
$("div.contentShow").removeClass("contentShow");
//将当前的显示
$("div.content:eq(" + index + ")").addClass("contentShow").css("margin-left", (index + 0.5) * 100 + "px");
}, 300);
}).mouseout(function ()
{
clearTimeout(timeoutId);
});
});
});
</script>
<style type="text/css">
div.content{clear:left;display:none;}
div.contentShow{display:block;}
a{text-decoration:none;color:Black;}
A:link {COLOR: #00135b; text-decoration: none;}
A:active {COLOR: #00135b; text-decoration: none;}
A:visited {COLOR: #00135b; text-decoration: none;}
A:hover {COLOR: #ff8a00; text-decoration: none;}
</style>
<div>
<ul id="menu" style="list-style:none;">
<li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;"> 一</li>
<li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;">二</li>
<li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;">三</li>
</ul>
<div style="margin-top:10px;">
<div class="content">
<ul style="list-style:none;">
<li style="width:100px; border:1px solid blue;"><a href="">一</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">二</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">三</a></li>
</ul>
</div>
<div class="content">
<ul style="list-style:none;">
<li style="width:100px; border:1px solid blue;"><a href="">df</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">df</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">df</a></li>
</ul>
</div>
<div class="content">
<ul style="list-style:none;">
<li style="width:100px; border:1px solid blue;"><a href="">43</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">34</a></li>
<li style="width:100px; border:1px solid blue;"><a href="">34</a></li>
</ul>
</div>
</div>
</div>

热心网友 时间：2022-04-22 21:10

效果是tab选取项卡的效果，要用js把它做出来。
<script language="javascript">
function tab(n){
for(i=0;i<3;i++){
document.getElementById("tab"+i).style.display="none";
}
documetn.getElementById("tab"+n).style.display="block";
}
</script>
<ul>
<li onmousemove="tab(0)">热点</li>
<li onmousemove="tab(1)">新闻</li>
<li onmousemove="tab(2)">活动</li>
</ul>
<div id="tab0" style="display:block;">
这里是热点模块内容
</div>
<div id="tab1" style="display:none;">
这里是新闻模块内容
</div>
<div id="tab2" style="display:none;">
这里是活动模块内容
</div>