二、鼠标划过tab切换

区别于一更为精简。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
    
     margin:0; padding:0;}
        .tab{
    
     width:1200px; overflow:hidden; margin:0 auto;}
        .tab .tit_list{
    
     width:1200px; height:60px; background:#0C0;}
        .tab .tit_list li{
    
     width:200px; height:60px; margin:0 30px; background:#993; text-align:center; line-height:60px; float:left;}
        .tab .tit_list .li_this{
    
     background:#900;}
        .tab .tit_list li a{
    
     color:#fff;}
        .tab .txt{
    
     width:1200px; height:300px; background:#69C; color:#fff; text-align:center;}
    </style>    
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
	<div class="tab">
    	<ul class="tit_list">
        	<li class="li_this"><a href="#">第一个</a></li>
            <li><a href="#">第二个</a></li>
            <li><a href="#">第三个</a></li>
        </ul>
        <div class="txt">第一个</div>
        <div class="txt" style="display:none;">第二个</div>
        <div class="txt" style="display:none;">第三个</div>
    </div>
    <script>
    $(function(){
    
    
        var $li=$(".tab .tit_list li");
        var $div=$(".tab .txt");        
        $li.mouseover(function(){
    
    
            $t=$(this).index();
            $li.removeClass("li_this");
            $(this).addClass("li_this");
            $div.css("display","none");
            $div.eq($t).css("display","block");
        })
    })
    </script>
</body>
</html>
二、鼠标划过tab切换

猜你喜欢
