jQuery简易选项卡

最新推荐文章于 2025-02-11 09:04:10 发布

纵稚

最新推荐文章于 2025-02-11 09:04:10 发布

阅读量210

点赞数 1

分类专栏： jquery 文章标签：选项卡 jQuery

本文链接：https://blog.youkuaiyun.com/Q2650173384/article/details/101054380

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

简易选项卡功能

话不多说上代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style>
        * {
        font-family:"宋体";
        padding:0px;
        margin:0px
        }
        ul {
        margin-left:10px
        }
        li {
        list-style:none;
        display:inline-block;
        border-radius:5px;
        width:100px;
        height:40px;
        border:1px solid gray;
        border-bottom:none;
        font-size:20px;
        line-height:40px;
        text-align:center;
        font-weight:600;
        background-color:ghostwhite;
        margin-left:-5px
        }
        .mydiv {
            border:3px solid orange;
            float:left;
            width:600px;
            height:350px;
            margin-top:-1px;
            display:none;
            color:orangered;
            font-size:20px
        }
        .selectli {/*选中li的样式*/
            background-color:orangered;
           color:white;
        }
        .selectdiv {/*选中div的样式 显示*/
        display:block;
        }
    </style>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script>
        $(function () {
            $("li:first").addClass("selectli");//加载时给第一个li 添加默认选中样式 
            var idval = $("li:first").attr("id");//注意id  以便拼接
            $("#div" + idval).addClass("selectdiv");//显示第一个div

            $("li").click(function () {
                $("li").removeClass("selectli");//点击li时  先移除所有之前的样式
                $("div").removeClass("selectdiv");
                $(this).addClass("selectli");//然后再添加样式
                var liid = $(this).attr("id");
                $("#div" + liid).addClass("selectdiv");
            });
        });
    </script>
</head>
<body>
    <ul>
        <li id="li1">my51job</li>
        <li id="li2">职位搜索</li>
        <li id="li3">简历管理</li>
    </ul>
    <div id="divli1" class="mydiv">一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一</div>
    <div id="divli2" class="mydiv">二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二</div>
    <div id="divli3"class="mydiv">三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三</div>
</body>
</html>

页面效果:

页面效果

欢迎转载