jQuery网页选项卡

发布时间：2020-06-11 09:41:29 来源：网络阅读：320 作者：lflianglan 栏目：web开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
        <meta name="keywords" content="关键词1，关键词2，关键词3等等"/> 
        <title>网页选项卡</title> 
        <style type="text/css"> 
            body,ul,li{margin:0; padding:0; list-style:none;} 
            .wrap{width:300px; height:200px; margin:10px auto; border:1px solid #000; padding:10px;} 
            .tab_menu{clear:both; margin-top:10px;} 
            .tab_box{clear:both;} 
            ul li{float:left; width:60px; height:30px; line-height:30px; text-align:center; margin-right:10px; pink;} < /span>
            .selected{background:#999;} 
            .tab_box div{height:150px; border:1px solid #f00;} 
            .hid{display:none;} 
            .hover{background:#f00;} 
        </style> 
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
        <script type="text/javascript"> 
            $(function(){ 
                var $div_li=$("div.tab_menu ul li"); 
                $div_li.click(function(){ 
                    $(this).addClass("selected") 
                           .siblings().removeClass("selected"); 
                    var index=$div_li.index(this);//获取当前单击的li在全部li中的索引 
                    $("div.tab_box>div") 
                           .eq(index).show()   //显示li元素对应的div元素 
                           .siblings().hide(); 
                }).hover(function(){//添加鼠标划入划出效果 
                    $(this).addClass("hover"); 
                },function(){ 
                    $(this).removeClass("hover"); 
                }) 
            }) 
        </script> 
    </head> 
    <body> 
        <div class="wrap"> 
            <div class="tab_menu"> 
                <ul> 
                    <li class="selected">时事</li> 
                    <li>体育</li> 
                    <li>娱乐</li> 
                </ul> 
            </div> 
            <div class="tab_box"> 
                <div>时事</div> 
                <div class="hid">体育</div> 
                <div class="hid">娱乐</div> 
            </div> 
        </div> 
    </body> 
</html>
向AI问一下细节
jQuery网页选项卡

猜你喜欢

最新资讯

相关推荐

相关标签
