请教一个jquery 导航栏的问题 本帖最后由 snfeifie 于 2012-06-21 10:25:20 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <div id="nav"> <div class="l"></div> <ul class="c"> <li> <span class="v"><a href="http://www.jsfoot.com" target="_blank">首页</a></span> <div class="kind_menu" style="left:50px"></div> </li> <li> <span class="v"><a href="a.aspx">导航一</a></span> <div class="kind_menu" style="left:40px"> <a href="a.aspx">导航一</a><span>|</span> <a href="#">导航一</a><span>|</span> <a href="#">导航一</a><span>|</span> <a href="#">导航一</a> </div> </li> <li> <span class="v"><a href="#">导航二</a></span> <div class="kind_menu"> <a href="#">导航二</a><span>|</span> <a href="#">导航二</a><span>|</span> <a href="#">导航二</a><span>|</span> <a href="#">导航二</a> </div> </li> <li> <span class="v"><a href="#">导航三</a></span> <div class="kind_menu" style="left:40px"> <a href="#">导航三</a><span>|</span> <a href="#">导航三</a> </div> </li> <li> <span class="v"><a href="#">导航四</a></span> <div class="kind_menu" style="left:40px"> <a href="#">导航四</a><span>|</span> <a href="#">导航四</a><span>|</span> <a href="#">导航四</a><span>|</span> <a href="#">导航四</a><span>|</span> <a href="#">导航四</a> </div> </li> <li> <span class="v"><a href="#">导航五</a></span> <div class="kind_menu" style="left:40px"> <a href="#">导航五</a><span>|</span> <a href="#">导航五</a><span>|</span> <a href="#">导航五</a><span>|</span> <a href="#">导航五</a> </div> </li> </ul> </div><!--nav--><script type="text/javascript"> var site_url = window.location.href.toLowerCase(); switch (true) { case site_url.indexOf("/jsfoot") > 0 || site_url.indexOf("/jquery") > 0 || site_url.indexOf("/js") > 0 : //判断当前频道属于哪个根目录模块就设置频道标签高亮 $("#nav li").attr("class",""); $("#nav li").eq(1).attr("class","nav_lishw"); //设置当前频道标签高亮 $(".nav_lishw .v a").attr("class","sele"); $(".nav_lishw .kind_menu").show(); break; default : $("#nav li").attr("class",""); $("#nav li").eq(0).attr("class","nav_lishw"); $(".nav_lishw .v a").attr("class","sele"); $(".nav_lishw .kind_menu").show(); } $("#nav li").hover( function(){ clearTimeout(setTimeout("0")-1); $("#nav .kind_menu").hide(); $("#nav li .v .sele").attr("class","shutAhover"); $(this).attr("id","nav_hover") $("#nav_hover .v a").attr("class","sele"); $("#nav_hover .kind_menu").show(); }, function(){ if($(this).attr("class") != "nav_lishw"){ $("#nav_hover .v .sele").attr("class",""); $("#nav_hover .kind_menu").hide(); } $(this).attr("id","") $("#nav li .v .shutAhover").attr("class","sele"); setTimeout(function(){ $(".nav_lishw .kind_menu").show(); $(".nav_lishw .v a").attr("class","sele"); },50); } ); </script> function setMenuSel() { var obj = $(".navHover"); var selIndex = 0; $("#Indexheader .nav a").each(function (i) {// 遍历出所有的导航菜单 $(this).removeClass(); if ($(this).attr("href") == location.pathname) { $(this).attr("class", "navHover"); selIndex = i; } }); if (location.pathname == "/") $("#Indexheader .nav a").first().attr("class", "navHover"); });项目中正在使用的一个方法,希望对你有帮助 能给全点吗?就是下面的HTML代码页给下,谢谢 用你自己的Html代码就行, 你只需要把遍历的JQ选择器改成你自己的就行了 Extjs tree id定义 ajax 提交表单 下拉框js问题 私有方法中访问变量 怎么实现 Extjs 表格数据实时刷新 急!!!!!!JavaScript 这段代码为什么会出错? 用JAVASCRIPT怎么置空服务器端TEXT控件?来者有分 js解析xml文件实现下拉导航(求源码)请不要用JQURY 百度地图api驾车路线经过多个地点,将地点和顺序代入怎么获取距离和时间 火狐浏览器中如何调用打印、打印浏览功能 把$换成jquery JS报出undefined is not a function错误
<div class="l"></div>
<ul class="c">
<li>
<span class="v"><a href="http://www.jsfoot.com" target="_blank">首页</a></span>
<div class="kind_menu" style="left:50px"></div>
</li>
<li>
<span class="v"><a href="a.aspx">导航一</a></span>
<div class="kind_menu" style="left:40px">
<a href="a.aspx">导航一</a><span>|</span>
<a href="#">导航一</a><span>|</span>
<a href="#">导航一</a><span>|</span>
<a href="#">导航一</a>
</div>
</li>
<li>
<span class="v"><a href="#">导航二</a></span>
<div class="kind_menu">
<a href="#">导航二</a><span>|</span>
<a href="#">导航二</a><span>|</span>
<a href="#">导航二</a><span>|</span>
<a href="#">导航二</a>
</div>
</li>
<li>
<span class="v"><a href="#">导航三</a></span>
<div class="kind_menu" style="left:40px">
<a href="#">导航三</a><span>|</span>
<a href="#">导航三</a>
</div>
</li>
<li>
<span class="v"><a href="#">导航四</a></span>
<div class="kind_menu" style="left:40px">
<a href="#">导航四</a><span>|</span>
<a href="#">导航四</a><span>|</span>
<a href="#">导航四</a><span>|</span>
<a href="#">导航四</a><span>|</span>
<a href="#">导航四</a>
</div>
</li>
<li>
<span class="v"><a href="#">导航五</a></span>
<div class="kind_menu" style="left:40px">
<a href="#">导航五</a><span>|</span>
<a href="#">导航五</a><span>|</span>
<a href="#">导航五</a><span>|</span>
<a href="#">导航五</a>
</div>
</li>
</ul>
</div><!--nav--><script type="text/javascript">
var site_url = window.location.href.toLowerCase();
switch (true) {
case site_url.indexOf("/jsfoot") > 0 || site_url.indexOf("/jquery") > 0 || site_url.indexOf("/js") > 0 :
//判断当前频道属于哪个根目录模块就设置频道标签高亮
$("#nav li").attr("class","");
$("#nav li").eq(1).attr("class","nav_lishw"); //设置当前频道标签高亮
$(".nav_lishw .v a").attr("class","sele");
$(".nav_lishw .kind_menu").show();
break;
default :
$("#nav li").attr("class","");
$("#nav li").eq(0).attr("class","nav_lishw");
$(".nav_lishw .v a").attr("class","sele");
$(".nav_lishw .kind_menu").show();
}
$("#nav li").hover(
function(){
clearTimeout(setTimeout("0")-1);
$("#nav .kind_menu").hide();
$("#nav li .v .sele").attr("class","shutAhover");
$(this).attr("id","nav_hover")
$("#nav_hover .v a").attr("class","sele");
$("#nav_hover .kind_menu").show();
},
function(){
if($(this).attr("class") != "nav_lishw"){
$("#nav_hover .v .sele").attr("class","");
$("#nav_hover .kind_menu").hide();
}
$(this).attr("id","")
$("#nav li .v .shutAhover").attr("class","sele");
setTimeout(function(){
$(".nav_lishw .kind_menu").show();
$(".nav_lishw .v a").attr("class","sele");
},50);
}
);
</script>
var obj = $(".navHover");
var selIndex = 0;
$("#Indexheader .nav a").each(function (i) {// 遍历出所有的导航菜单
$(this).removeClass();
if ($(this).attr("href") == location.pathname) {
$(this).attr("class", "navHover");
selIndex = i;
}
});
if (location.pathname == "/")
$("#Indexheader .nav a").first().attr("class", "navHover"); });
项目中正在使用的一个方法,希望对你有帮助