超简单横向选项卡 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.menu ul li{
display:inline-block;
width:100px;
height:34px;
background:#ccc;
margin-right:15px;
line-height:34px;
text-align:center;
cursor:pointer
}
.menu .menu_nr{
width:300px;
height:34xp;
border:1px solid pink;
margin-left:50px;
display:none;
}
.on{background:#1e88e5!important;color:#fff;}
</style>
<div class="menu">
    <ul>
        <li class="on">昨天</li>
        <li>今天</li>
        <li>明天</li>
    </ul>
    <div style="display:block" class="menu_nr">昨天</div>
    <div class="menu_nr">今天</div>
    <div class="menu_nr">明天</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type = "text/javascript" >
 $(document).ready(function() {
    // 选项卡移入事件
    $('.menu ul li').mouseover(function(){
        $(this).addClass('on');
        $(this).siblings().removeClass();
        var index=$(this).index();
        $('.menu .menu_nr').hide();
        $('.menu .menu_nr:eq('+index+')').show();
    });

});
 </script>
</html>

 

posted @ 2017-06-06 15:35  夏小夏吖  阅读(496)  评论(0)  编辑  收藏  举报