tab切换(二)

最新推荐文章于 2022-03-19 13:55:14 发布

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

最新推荐文章于 2022-03-19 13:55:14 发布

阅读量181

点赞数

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

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

版权

js 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

方法一：
在这里插入图片描述

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

方法二：