jQuery写二级列表选项卡
来源:互联网 发布:画图纸软件下载 编辑:程序博客网 时间:2024/06/12 18:13
css代码
<style type="text/css">
body,div,ul,li,a,h3{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
width:180px;
margin-left: 30px;
}
li{
list-style: none;
width:178px;
height:30px;
padding:5px 10px;
background: #BCD68D;
}
.list{
position: relative;
}
.list>li{
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
a{
color: #000;
font-size: 16px;
text-decoration: none;
font-family: "microsoft yahei";
}
.hbgc{
background-color: red;
}
.second{
position: absolute;
left: 147px;
display: none;
border: 1px solid #000;
}
.sec1{
top:36px;
}
.sec2{
top:66px;
}
.sec3{
top:96px;
}
.sec4{
top:126px;
}
.sec5{
top:156px;
}
h3{
width: 178px;
border: 1px solid #000;
background: #BCD68D;
padding:5px 10px;
}
.borc{
position: relative;
}
li.borc:before{
content:"";
width:4px;
height: 30px;
display: block;
background: #BCD68D;
z-index: 99;
position: absolute;
top:0;
left:-2px;
}
</style>
html代码
<div class="nav">
<ul class="list">
<h3>电脑数码类产品</h3>
<li><a href="#">笔记本</a>
<ul class="second sec1">
<li class="borc"><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
</ul>
</li>
<li><a href="#">移动硬盘</a>
<ul class="second sec2">
<li class="borc"><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
</ul>
</li>
<li><a href="#">全球购</a>
<ul class="second sec3">
<li class="borc"><a href="#">全球购1</a></li>
<li><a href="#">全球购2</a></li>
<li><a href="#">全球购3</a></li>
</ul>
</li>
<li><a href="#">电脑软件</a>
<ul class="second sec4">
<li class="borc"><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
</ul>
</li>
<li><a href="#">数码产品</a>
<ul class="second sec5">
<li class="borc"><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
</ul>
</li>
</ul>
</div>
javascript代码
<script type="text/javascript">
$(function(){
$("li").mouseover(function(){
$(this).children("ul").css("display","block");
});
$("li").mouseout(function(){
$(this).children("ul").css("display","none");
});
})
</script>
- jQuery写二级列表选项卡
- jQuery写选项卡
- css写二级列表
- jquery插件:下拉列表选项卡
- jQuery二级联动动态列表
- js写的二级级联选项框
- jquery 改变下拉列表选项
- 选项卡 一级二级横向
- 用js写二级下拉列表框
- jquery实现下拉列表二级联动
- jquery带动画的二级下拉列表
- jquery那点事之写选项卡
- 分别用原生JS与jQuery 写简单选项卡
- JQuery二级联动下拉框+添加移除选项
- 选项卡插件jquery.tab.js和不用js写选项卡
- jQuery动态控制下拉列表的被选项
- jquery 实现左右下拉列表 选项 移动
- jquery mobile navbar列表appendTo追加选项
- 利用二叉树设计一款简单的huffman编码器
- 动态链接库dll和log4cpp的相关问题
- Linux——nfs文件系统
- 编程语言选型通史:快速整合产生的断层
- 【Java】13.ExecutorService
- jQuery写二级列表选项卡
- javascript
- SAP NetWeaver Gateway介绍
- Packet Tracer 包传输路径跟踪测试
- 现金贷新规:监管了谁,讽刺了谁,维护了谁
- logback:输出日志到文件(滚动)&& Spring Boot干货系列:(七)默认日志logback配置解析(转载)
- LzyRecord。
- 《Java JDK8学习笔记》读书笔记(五)
- 51Nod 1489 蜥蜴和地下室 DFS