tab选项卡切换

最新推荐文章于 2024-03-02 23:31:02 发布

Sokach321

最新推荐文章于 2024-03-02 23:31:02 发布

阅读量189

点赞数 1

本文链接：https://blog.csdn.net/weixin_43549976/article/details/108678605

版权

tab选项卡切换

方法一：
attr() 设置或返回被选元素的属性，接收两个参数，如果是两个参数则是将第二个参数设置为id值

<style>
	.active {
        width: 300px !important;
        background: pink;
        box-shadow: -18px 6px 8px 0 rgba(0, 0, 0, 0.20);
        margin-left: -50px;
        border-radius: 4px;
        font-weight: bold;
    }
</style>
<body>
	<div class="tab">
            <p id="list1" class="active">首页</p>
            <p id="list2">新闻动态</p>
            <p id="list3">信息公开</p>
            <p id="list4">党建</p>
            <p id="list5">社会服务</p>
        </div>
        <div class="TabCon">
            <div id="con_list1" style="display: block;">首页内容</div>
            <div id="con_list2" style="display: none;">新闻动态内容</div>
            <div id="con_list3" style="display: none;">信息公开内容</div>
            <div id="con_list4" style="display: none;">党建内容</div>
            <div id="con_list5" style="display: none;">社会服务内容</div>
        </div>
</body>

<script>
	$(function () {
            $('.tab p').hover(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var id = $(this).attr('id')
                $('#con_' + id).show().siblings().hide();
            })
        })
</script>

方法二：

<style>
	.active {
        width: 300px !important;
        background: pink;
        box-shadow: -18px 6px 8px 0 rgba(0, 0, 0, 0.20);
        margin-left: -50px;
        border-radius: 4px;
        font-weight: bold;
    }
    .TabCon>div {
        display: none;
    }
</style>

<body>
	<div class="tab">
        <p>首页</p>
        <p>新闻动态</p>
        <p>信息公开</p>
        <p>党建</p>
        <p>社会服务</p>
    </div>
    <div class="TabCon">
        <div>首页内容</div>
        <div>新闻动态内容</div>
        <div>信息公开内容</div>
        <div>党建内容</div>
        <div>社会服务内容</div>
    </div>
</body>

<script>
	$(function () {
            $('.tab p').hover(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var i=$(this).index();
                $('.TabCon>div').eq(i).show().siblings().hide();
            })
            $('.TabCon>div').eq(0).show();
        })
</script>

Sokach321

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab选项卡切换

tab选项卡切换方法一：attr() 设置或返回被选元素的属性，接收两个参数，如果是两个参数则是将第二个参数设置为id值<style> .active { width: 300px !important; background: pink; box-shadow: -18px 6px 8px 0 rgba(0, 0, 0, 0.20); margin-left: -50px; border-radius: 4
复制链接

扫一扫