JQ二级菜单选项卡，默认第一项，使用jquery实现方法。

效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带下划线导航菜单</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
body{background: #fff;font-size: 12px;}
img{border: 0;}
a{text-decoration: none;color: #333;}
a:hover{color: #FF8400;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix10:after{content: ".";display: block;height: 10px;clear: both;visibility: hidden;}
.h10{height: 10px;}
.h15{height: 15px;}
#header{width: 1000px;margin: 0 auto;}
.navBar{width: 1000px;margin: 0 auto;height: 50px;line-height: 50px;background: #000;color: #333;position: relative;}
.nav{position: relative;width: 980px;margin: 0 auto;font-family: "Microsoft YaHei",SimSun,SimHei;font-size: 14px;}
.nav a{color: #fff;}
.nav h3{font-size: 100%;font-weight: normal;}
.nav .m{float: left;position: relative;z-index: 1;}
.nav .s{float: left;width: 3px;text-align: center;color: #D4D4D4;font-size: 12px;}
.nav h3 a{display: block;text-align: center;font-weight: bold;height: 35px;margin:0 31.5px}
.nav ul{display: none;position: absolute;left: -3px;top: 50px;z-index: 1;width: 117px;border: 1px solid #E6E4E3;border-top: 0;background: #fff;}
.nav ul li{text-align: center;padding: 0 8px;margin-bottom: -1px;}
.nav ul li a{display: block;border-bottom: 1px solid #E6E4E3;padding: 8px 0;height: 28px;line-height: 28px;color: #000;font-size: 12px;font-weight: bold;}
.nav ul li a:hover{color: #FE7700;}
.m h3 .active{border-bottom: 3px solid #FE7700;
}
.nav .sub{display: block;
}
</style>
</head>
<body>
<br>
<div class="navBar"><ul class="nav clearfix"><li class="m"><h3 ><a href="#" class="active">网站首页</a></h3><ul class="sub"><li><a href="" title="企业简介">首页简介</a></li><li><a href="" title="组织架构">组织架构</a></li><li><a href="" title="企业资质">企业资质</a></li><li><a href="" title="企业文化">企业文化</a></li></ul></li><li class="s">|</li><li class="m"><h3><a href="#" title="关于我们">关于我们</a></h3><ul><li><a href="" title="企业简介">企业简介</a></li><li><a href="" title="组织架构">组织架构</a></li><li><a href="" title="企业资质">企业资质</a></li><li><a href="" title="企业文化">企业文化</a></li></ul></li><li class="s">|</li><li class="m"><h3><a  href="#">资质认定</a></h3><ul><li><a href="" title="国家高新认证">国家高新认证</a></li><li><a href="" title="软件企业认证">软件企业认证</a></li><li><a href="" title="深圳市高企认证">深圳市高企认证</a></li><li><a href="" title="其它认证">其它认证</a></li></ul></li><li class="s">|</li><li class="m"><h3><a  href="#">政府扶持</a></h3><ul><li><a href="" title="深圳市级扶持">深圳市扶持</a></li><li><a href="" title="各区级扶持">各区级扶持</a></li><li><a href="" title="广东省级扶持">广东省扶持</a></li><li><a href="" title="国家和部级扶持">国家扶持</a></li></ul></li><li class="s">|</li><li class="m"><h3><a  href="#" title="知识产权">知识产权</a></h3><ul><li><a href="" title="知识产权申请">知识产权申请</a></li><li><a href="" title="知识产权转让">知识产权转让</a></li><li><a href="" title="技术咨询">技术咨询</a></li><li><a href="" title="技术成果鉴定">技术成果鉴定</a></li></ul></li><li class="s">|</li><li class="m"><h3><a  href="#" title="上市服务">上市服务</a></h3><ul><li><a href="" title="上市条件及流程">上市条件及流程</a></li><li><a href="" title="上市顾问">上市顾问</a></li><li><a href="" title="税收筹划">税收筹划</a></li><li><a href="" title="资产重组">资产重组</a></li></ul></li><li class="s">|</li><li class="m"><h3><a href="#" title="人才招聘">人才招聘</a></h3></li><li class="s">|</li><li class="m"><h3><a href="#" title="联系我们">联系我们</a></h3></li><li class="block" style="left: 251px;"></li></ul>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$('.m>h3').find('a').click(function(){$(".m>h3>a").removeClass("active");$(this).addClass("active");$('.m>ul').removeClass('sub');$(this).parent().parent().find("ul").addClass('sub');})})</script>
</body>
</html>

总结:原生选项卡有很多种实现方式，这个只是其中一种写法.可参考学习.

JQ二级菜单选项卡，默认第一项，使用jquery实现方法。相关推荐

动态给下拉框，单选框赋值，设置默认选中项的几种方法
selectId为select的id $('#selectId')[0].selectedIndex = 0; //根据索引来赋值 $('#selectId').val('val值'); //根据va ...
element-ui中导航菜单默认激活子菜单的第一项
默认激活子菜单的第一项代码部分: <el-menuclass="el-menu-vertical-demo"bac ...
Ubuntu18.04 更改GRUB引导菜单背景图片和默认启动项
一.更改GRUB引导菜单背景图片 1.首先准备一张想要的照片,文件名是啥无所谓,只要格式是*.jpg *.JPG *.jpeg *.JPEG *.png *.PNG *.tga *.TGA都行,都能自 ...
[vscode] 代码提示不能默认选中第一项问题
码代码时发现一个问题,有些代码提示无法选中第一项. 如果是所有代码提示都无法选中第一项,直接百度.这里说的是另一种,部分代码无法默认选中. 在输入类似class=""这类代码的代码 ...
VSCode 代码有的提示不能默认选中第一项问题
如果是所有代码提示都无法选中第一项,直接百度.这里说的是另一种,部分代码无法默认选中. 在输入类似class=""这类代码的代码自动补全回车后,输入代码触发代码提示后不会默认选中第 ...
vue折叠面板如何默认展开第一项
折叠面板折叠面板官网: 项目展示: 代码展示: 默认展开第一个默认展开第二个默认全部展开默认全部折叠这里的title名字是自己定义的.绑定的值为name的值.由于这是一个循环嵌套的面板,故而 ...
Ionic如何实现单选二级菜单切换
Ionic如何实现单选二级菜单切换最近有个需求,需要做一个用户视图,数据全都从PC端系统实时取,由于这个功能在电脑浏览器展示还可以,即使菜单全部展开,只要美工稍加调整下位置也是放得下的,但是同样的功 ...
HTML下拉框二级菜单
一.form表单 <div><form><div><select>//默认项为第一个<option>广州 ...
二级菜单HTML原理,CSS多级菜单的实例代码讲解
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单.实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧. 先来一个非常简单的一级菜单与悬停效果. 菜单一菜单 ...

JQ二级菜单选项卡，默认第一项，使用jquery实现方法。

JQ二级菜单选项卡，默认第一项，使用jquery实现方法。相关推荐

最新文章

热门文章