noaman_wgs

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
【1-4】jQuery代码风格-导航栏

实现一个导航栏，单机不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。

实现功能如图：

css:

 1 /* reset */
 2 body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
 3 form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
 4 input,select{font-size:12px;line-height:16px;}
 5 img{border:0;}
 6 ul,li{list-style-type:none;}
 7 a {color:#00007F;text-decoration:none;}
 8 a:hover {color:#bd0a01;text-decoration:underline;}
 9 
10 .box {
11     width: 150px;
12     margin: 0 auto;
13 }
14 .menu{
15     overflow:hidden;
16     border-color: #C4D5DF;
17     border-style: solid;
18     border-width: 0 1px 1px;
19 }
20 /* lv1 */
21 .menu li.level1 a{
22     display: block;
23     height: 28px;
24     line-height: 28px;
25     background:#EBF3F8;
26     font-weight:700;
27     color: #5893B7;
28     text-indent: 14px;
29     border-top: 1px solid #C4D5DF;
30 }
31 .menu li.level1 a:hover{text-decoration:none;}
32 .menu li.level1 a.current{background:#B1D7EF;}
33 /* lv2 */
34 .menu li ul{overflow:hidden;}
35 .menu li ul.level2{display:none;}
36 .menu li ul.level2 li a{
37     display: block;
38     height: 28px;
39     line-height: 28px;
40     background:#ffffff;
41     font-weight:400;
42     color: #42556B;
43     text-indent: 18px;
44     border-top: 0px solid #ffffff;
45     overflow: hidden;
46 }
47 .menu li ul.level2 li a:hover{
48     color:#f60;
49 }

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>

 

posted on 2016-10-10 19:55  noaman_wgs  阅读(281)  评论(0)    收藏  举报