一、鼠标滑到tab切换

最新推荐文章于 2022-01-13 14:24:08 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2022-01-13 14:24:08 发布

阅读量209

点赞数

分类专栏： js css 文章标签： tab切换

本文链接：https://blog.csdn.net/weixin_42645716/article/details/102918575

版权

js 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

css

30 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>
        /* CSS Document */
        html,body,div,ul,li,p,input,a,span,img,a,hr,h3,h5,h2{ margin:0; padding:0;}
        ul{ list-style:none;}
        a{ text-decoration:none;}
        img{ border:none;}

        .center_right{ width:900px; overflow:hidden; margin:0 auto; padding-left:40px;}

        .center_right .txt{width:900px; overflow:hidden;}
        .center_right .txt ul{width:900px; height:46px;}
        .center_right .txt ul li{width:150px; height:46px; line-height:35px; float:left; text-align:center; }
        .center_right .txt ul li a{ color:#000; display:block; width:148px; height:34px;background:#fcf3f3; border:1px #ccc solid;}
        .center_right .txt ul li.active{ background:yellow;}
        .center_right .txt ul li a.a_this{ border-bottom:none; color:#FFF;background: none; }
    </style>    
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    
    <!--tab切换-->
    <div class="center_right">
        <div class="txt">
            <ul class="tab_content">
                <li><a id="first" href="#">111111</a></li>
                <li><a href="#">22222222</a></li>
                <li><a href="#">333333</a></li>
            </ul>
        </div>
        <div class="photo">
            <ul>
                <a href="###"><li><div class="txt02"><p>1111111111....</p></div></li></a>
                <a href="###"><li><div class="txt02"><p>1111111111....</p></div></li></a>
                <a href="###"><li><div class="txt02"><p>1111111111....</p></div></li></a>
            </ul>
        </div>
        <div class="photo" style="display:none;">
            <ul>
                <a href="###"><li><div class="txt02"><p>22222222222....</p></div></li></a>
                <a href="###"><li><div class="txt02"><p>22222222222....</p></div></li></a>
                <a href="###"><li><div class="txt02"><p>22222222222....</p></div></li></a>
            </ul>
        </div>
        <div class="photo" style="display:none;">
            <ul>
                <a href="###"><li><div class="txt02"><p>333333333333....</p></div></li></a>
                <a href="###"><li><div class="txt02"><p>333333333333....</p></div></li></a>
                <a href="###"><li><div class="txt02"><p>333333333333....</p></div></li></a>
            </ul>
        </div>

        <!--tab切换结束-->
    <script>
    $(function(){
		window.onload = function(){
			var $li = $('.tab_content li');
			var $ul = $('.photo');
			var $a=$('.tab_content li a');
			
			$a.mouseover(function(){
				var $this=$(this);
				var $n=$this.index();
				$a.removeClass('a_this');
				$this.addClass('a_this');
            })
						
			$li.mouseover(function(){
				var $this = $(this);
				var $t = $this.index();
				$li.removeClass('active');
				$this.addClass('active');
				$ul.css('display','none');
				$ul.eq($t).css('display','block');
			})
		}
	});
    </script>
</body>
</html>

混迹在开发队伍里的伪开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一、鼠标滑到tab切换

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <me...
复制链接

扫一扫