【1-4】jQuery代码风格-导航栏
实现一个导航栏，单机不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。
实现功能如图：
css:
/* reset */
body{margin:;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:;padding:;}
input,select{font-size:12px;line-height:16px;}
img{border:;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;} .box {
width: 150px;
margin: 0 auto;
}
.menu{
overflow:hidden;
border-color: #C4D5DF;
border-style: solid;
border-width: 0 1px 1px;
}
/* lv1 */
.menu li.level1 a{
display: block;
height: 28px;
line-height: 28px;
background:#EBF3F8;
font-weight:;
color: #5893B7;
text-indent: 14px;
border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{display:none;}
.menu li ul.level2 li a{
display: block;
height: 28px;
line-height: 28px;
background:#ffffff;
font-weight:;
color: #42556B;
text-indent: 18px;
border-top: 0px solid #ffffff;
overflow: hidden;
}
.menu li ul.level2 li a:hover{
color:#f60;
}
jQuery以及HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链式操作风格</title>
<link rel="stylesheet" href="css/default.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".level1 > a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式
.next().hide(); //它们的下一个元素隐藏
return false;
});
});
</script>
</head>
<body>
<h2>网页导航栏</h2>
<div class="box">
<ul class="menu"> <li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">无袖衬衫</a></li>
<li><a href="#none">套头衬衫</a></li>
</ul>
</li> <li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">长袖卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li> <li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤子</a></li>
<li><a href="#none">牛仔裤子</a></li>
<li><a href="#none">棉麻裤子</a></li>
<li><a href="#none">西装裤子</a></li>
</ul>
</li> </ul>
</div>
</body>
</html>
【1-4】jQuery代码风格-导航栏的更多相关文章
- jquery侧边折叠导航栏制作，两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- jQuery实现侧边导航栏效果
效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...
- Jquery实现动态导航栏和轮播导航栏
动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- jquery版滑块导航栏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- 基于Bootstrap、Jquery的自适应导航栏
css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...
- 导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
- jquery实现的导航栏切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery点击导航栏选中更换样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 解决SimpleCursorAdapter不能自动更新的问题
假设场景是这样的:你使用SimpleCursorAdapter显示数据,并监听数据的变化:在数据发生变化的时候,调用cursor的requery,期待UI显示也跟着变化. 但是,你可能会发现,UI并没 ...
- Apache详细介绍 - [ Apache v2.4.10 for Windows ]
详细介绍 - [ Apache v2.4.10 for Windows ] 下载:http://down.admin5.com/fuwuqi/Apache_Windows.html Apache是世界 ...
- ubuntu Virtualbox菜单栏不见
ubuntu 装了Virtualbox 后,不知道怎么操作的导致顶部菜单栏不见啦, 网上查了下,我们看到开启/关闭 Scale Mode的快捷键都是 Ctrl C ,注意Ctrl是右边的那个不是左边那 ...
- FHS目录配置下，常见的几个问题及解答
请说明/bin与/usr/bin目录所放置的执行文件有何不同之处? /bin主要放置在开机时,以及进入单人维护模式后还能够被使用的指令,至于/usr/bin则是大部分软件提供的指令放置处. 请说明/b ...
- 94. Binary Tree Inorder Traversal
Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary tre ...
- poj 3468 线段树区间更新/查询
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...
- C函数及指针学习1
1 大段程序注释的方法 #if 0#endif 2三字母词 以两个问号 开始的都要注意 3 字面值(常量) 在整型号字面值后加 字符L (long),U(unsigned)说明字符常量 为长整型 或( ...
- XML的解析方式(DOM、SAX、StAX)
(新) XML的解析方式(DOM.SAX.StAX) 博客分类: XML 一般来说,解析XML文件存在着两种方式,一种是event-based API,比如说象SAX,XNI. 第二种是tree ...
- Codeforces Round #141 (Div. 2)
A. Is your horseshoe on the other hoof? 模拟题意. B. Two Tables 暴力枚举\(x,y\). C. Fractal Detector 显然,判断图形 ...
- 升级win10的理由
微软也没给我钱,我免费给它打了次广告. 我还是非常喜欢linux的,无奈公司深度依赖windows. 废话不多说,直接进入主题: [开机速度] 这里先说句题外话,不那么缺钱的兄弟,一定要去换一块SSD ...