JQ---选项卡

最新推荐文章于 2024-01-09 21:27:06 发布

candy_li123

最新推荐文章于 2024-01-09 21:27:06 发布

阅读量1.4k

点赞数

分类专栏： JQuery 文章标签： JQ选项卡选项卡

本文链接：https://blog.csdn.net/candy_li123/article/details/50071531

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2015-11-27—选项卡
（1）通过点击改变选项卡的显示内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>选项卡</title>  
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .tab{
                position: absolute;
                top: 20%;
                left: 40%;
            }
            .selected{
                background-color: yellowgreen;
            }
            .hide{
                display: none;
            }
            .table_menu ul li{
                list-style: none;
                float: left;
                padding: 8px 25px 8px 25px;
                cursor: pointer;
                border: 1px solid greenyellow;
            }   
            .tab_box{
                clear: both;
                width: 250px;
                height: 150px;
                border: 1px solid #999;
            }

        </style>
        <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                var $div_li=$("div .table_menu ul li");
            //设置li的单击事件
                $div_li.click(function(){
                //设置li单击时的样式
                    $(this).addClass("selected")
                            .siblings().removeClass("selected");
                //记录当前点击li的index            
                    var index=$div_li.index(this);
                //选择与li相同index的div显示，其余隐藏   
                    $("div .tab_box >div")
                        .eq(index).show()
                        .siblings().hide();
                });

            })
        </script>
    </head>
    <body>
        <div class="tab">
            <div class="table_menu">
                <ul>
                    <li class="selected">实事</li>
                    <li>体育</li>
                    <li>娱乐</li>
                </ul>
            </div>
            <div class="tab_box">
                <div>实事版块儿</div>
                <div class="hide">体育版块儿</div>
                <div class="hide">娱乐版块儿</div>
            </div>
        </div>  
    </body>
</html>

（2）通过点击改变选项卡的显示内容，鼠标移入li时改变其背景颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>选项卡</title>  
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .tab{
                position: absolute;
                top: 20%;
                left: 40%;
            }
            .selected{
                background-color: yellowgreen;
            }
            .hide{
                display: none;
            }
            .hover{
                background-color: aquamarine;
            }
            .table_menu ul li{
                list-style: none;
                float: left;
                padding: 8px 25px 8px 25px;
                cursor: pointer;
                border: 1px solid greenyellow;
            }   
            .tab_box{
                clear: both;
                width: 250px;
                height: 150px;
                border: 1px solid #999;
            }

        </style>
        <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                var $div_li=$("div .table_menu ul li");
            //设置li的单击事件
                $div_li.click(function(){
                //设置li单击时的样式
                    $(this).addClass("selected")
                            .siblings().removeClass("selected");
                //记录当前点击li的index            
                    var index=$div_li.index(this);
                //选择与li相同index的div显示，其余隐藏   
                    $("div .tab_box >div")
                        .eq(index).show()
                        .siblings().hide();
                }).hover(function(){
                    $(this).addClass("hover");
                },function(){
                    $(this).removeClass("hover");
                });

            })
        </script>
    </head>
    <body>
        <div class="tab">
            <div class="table_menu">
                <ul>
                    <li class="selected">实事</li>
                    <li>体育</li>
                    <li>娱乐</li>
                </ul>
            </div>
            <div class="tab_box">
                <div>实事版块儿</div>
                <div class="hide">体育版块儿</div>
                <div class="hide">娱乐版块儿</div>
            </div>
        </div>  


    </body>
</html>

candy_li123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQ---选项卡

2015-11-27—选项卡（1）通过点击改变选项卡的显示内容<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;}
复制链接

扫一扫