h5学习笔记：选项卡

最新推荐文章于 2024-07-16 17:22:18 发布

hero82748274

最新推荐文章于 2024-07-16 17:22:18 发布

阅读量3.4k

点赞数

分类专栏： javascript和Egret相关

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

版权

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

97 篇文章 4 订阅

订阅专栏

锋利的jquery 也提及到这个案例。不过有几处地方一直没看懂。只好作了一下修改。用到jq的addClass的时候，遇到一个坑，发现出现同样式的时候，addClass无论怎样都无法出现。这个就是一个使用注意的地方。

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标签选项</title>
    </head>
    <style type="text/css">
        .tab_box{
           width: 300px;
           height: 200px;
           background-color: #f8f8f8;
           border-radius: 4px;
        }
        .selected{      
            background-color: #CCCCCC;
            color: white;
        }

        .tab_menu ul li {
           background-color: #f8f8f8;
           display: inline-block;   
         }

       .tab_menu ul li a{       
            display: block;
            padding: 5px;
            text-decoration: none;
        } 

        ul{ 
             list-style: none;
             margin: 0;
             padding: 0;
        }

        .hide{
            display: none;
        }
    </style>
    <body>
        <div class="tab_menu">
            <ul>
                <li ><a class="selected" href="#">新闻</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">体育</a></li>
            </ul>
        </div>
        <div class="tab_box">
            <div>
                新闻消息内容
            </div>
            <div class="hide">
                娱乐消息内容
            </div>
            <div class="hide">
                体育消息内容
            </div>
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            //设计交互
            $(function(){

                var li_a= $(".tab_menu ul li a");
                li_a.click(function(){
                    $(this).addClass("selected");
                    $(this).parent().siblings().children().removeClass("selected");
                    var index =  li_a.index(this);
                    $(".tab_box > div").eq(index).show().siblings().hide();             
                });
            })          
        </script>


    </body>
</html>

这里写图片描述

当需要移动过去就出现tab的内容修改如下。

 li_a.click(function (){

});

li_a.mouseover(function(){

});

hero82748274

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记：选项卡

锋利的jquery 也提及到这个案例。不过有几处地方一直没看懂。只好作了一下修改。用到jq的addClass的时候，遇到一个坑，发现出现同样式的时候，addClass无论怎样都无法出现。这个就是一个使用注意的地方。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>标签选项</title>
复制链接

扫一扫