h5学习笔记：导航菜单（2）

最新推荐文章于 2022-12-20 12:30:26 发布

hero82748274

最新推荐文章于 2022-12-20 12:30:26 发布

阅读量1.8k

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/52295467

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

在使用原生的操作dom需要工序会多一些，如果使用jq的话，处理这种点击一个按钮的时候变色，其他已经点击过则取消，这种互斥的按钮做法会相当容易一点。其中使用jq中siblings的方法变得容易得多了。

第一步定义css选中样式

导航菜单里面，先定义好变色的css 样式。

 .selected
       {
          color: red;   
       }

第二步引用jq模块

在网页中加入js模块，引进jq的类，使用cdn的百度资源。其次我们需要对a标签进来监听。我们使用我们对a标签来今天今天点击事件。获取a标签后，addClass对标签内容进行样式添加。parent则是li标签，那么li标签的同级标签则可以用siblings获取。li的标签子级标a签需要进行删除旧的样式。当切换另外一个按钮的时候，这样就可以看到一种互斥效果了。

 $(".ui-nav-menu li a").click(function(){

              $(this).addClass("selected").parent().siblings().children().removeClass('selected');

           });

       })

这里写图片描述
总代码如下

<html>
    <meta  charset="utf-8"/>
   <head>
     <title>菜单导航2</title>
   </head>
   <style style="text/css">

       .ui-nav-menu
       {
           list-style: none;
           width: 100px;
           text-align: center;          
       }

       .ui-nav-menu li
       {
           line-height: 30px;
           margin-top: 5px;
           border: 2px;
           background-color: burlywood
       }

       .selected
       {
          color: red;   
       }
        a{text-decoration: none;}
    </style>
    <body>
            <div id="menu">      
               <ul class="ui-nav-menu">
                  <li><a href="#" class="selected">家用电器</a></li>
                  <li><a href="#">汽车用品</a></li>
                  <li><a href="#">玩具乐器</a></li>
                  <li><a href="#">营养保健</a></li>
                  <li><a href="#">清洁用品</a></li>
                  <li><a href="#">个护化妆</a></li>
                </ul>
          </div>
    </body>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(function(){

           $(".ui-nav-menu li a").click(function(){

              $(this).addClass("selected").parent().siblings().children().removeClass('selected');

           });

       })



    </script>


</html>

hero82748274

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记：导航菜单（2）

在使用原生的操作dom需要工序会多一些，如果使用jq的话，处理这种点击一个按钮的时候变色，其他已经点击过则取消，这种互斥的按钮做法会相当容易一点。其中使用jq中siblings的方法变得容易得多了。第一步定义css选中样式导航菜单里面，先定义好变色的css 样式。 .selected { color: red; }第二步引用jq模块在网页中加
复制链接

扫一扫