随笔 - 11  文章 - 2  评论 - 1

tab选项卡

简单实现一个用jquery做的tab选项卡

<!doctype html>
<html lang="zh-CN">
<head>
<mate http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>tab选项卡</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    body{
        font:12px/19px Arial, Helvetica, sans-serif; color:#666;
    }
    .tab{
        width:240px;
        margin:50px;
    }
    .tab_menu{
        clear:both;
    }
    .tab_menu li{list-style:none; background-color:orange;float:left; cursor:pointer;padding:1px 6px;margin-right:4px;border:1px solid #666;border-bottom:none;width:40px; text-align:center;}

    .tab_menu li.hover{
        background:red;
    }
    .tab_menu li.selected { color:#FFF; background:#6D84B4;}
    .tab_box{clear:both; border:1px solid #898989; height:100px;}
    .hide{display:none;}


</style>
</head>
<body>
    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected">陕西</li>
                <li>四川</li>
                <li>北京</li>
                <li>上海</li>
            </ul>
        </div>
    
        <div class="tab_box">
            <div class="tab_box_con">陕西</div>
            <div class="tab_box_con hide">四川</div>
            <div class="tab_box_con hide">北京</div>
            <div class="tab_box_con hide">上海</div>
        </div>
    
    </div>

<script type="text/javascript">
    $(function(){
        var $div_li = $(".tab_menu ul li"); 
        $div_li.hover(function(){
            $(this).addClass("selected").siblings().removeClass("selected");

            var key = $div_li.index(this);
            $("div.tab_box > .tab_box_con").eq(key).show().siblings().hide();
        });
    });

</script>
</body>
</html>

 

posted @ 2016-01-21 17:11  Double405  阅读(175)  评论(0)    收藏  举报