JQ---选项卡

来源：互联网发布：天刀网络延迟编辑：程序博客网时间：2024/05/22 08:23

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>

0 0