二、鼠标划过tab切换

最新推荐文章于 2021-06-03 01:53:49 发布

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

最新推荐文章于 2021-06-03 01:53:49 发布

阅读量226

点赞数

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

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

版权

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>
        *{ 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>

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

关注

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> ...
复制链接

扫一扫