jQuery根据data-的值来找到引用的元素

最新推荐文章于 2025-04-11 19:27:13 发布

八九燕来

最新推荐文章于 2025-04-11 19:27:13 发布

阅读量2w

点赞数 1

分类专栏： JavaScript CSS jQuery

本文链接：https://blog.youkuaiyun.com/carrousel0516/article/details/80202343

版权

JavaScript 同时被 3 个专栏收录

13 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

<html>
<head>
<title>
</title>
<style>
    #left{
        height:500px;
        width:20%;
        float:left;
        border-top:1px solid blue;
    }
    #list{margin:0;padding:0;}
    #list li{
        width:100%;
        height:64px;
        font-size:14px;
        color:#666;
        text-align:center;
        line-height:64px;
    }
    #right{
        float:left;
        width:79%;
        height:500px;
        border-top:1px solid blue;
        border-left:1px solid blue;
    }
    .block{
        float:left;
        margin-left:3%;
        margin-top:20px;
        width:30%;
        text-align:center;
    }
    .block img{
        width:60%;
    }
</style>
<script>
    $(document).ready(function(){
        $("#list li").click(function(){
            var category = $(this).data("type");
            $(".category").hide();
            $(".category[data-type=" + category + "]").show();
        });
    });
</script>
</head>
<body>
<div class="container">
    <div id="left">
        <ul id="list">
            <li data-type="recomment">推荐</li>
            <li data-type="role">角色</li>
            <li data-type="pets">召唤兽</li>
            <li data-type="arm">武器</li>
            <li data-type="defence">防具</li>
        </ul>
    </div>
    <div id="right">
        <div class="category" data-type="role" id="role">
            <div class="block">
                <img src="sysimg/school/dt.png" />
                <p>大唐官府</p>
            </div>
            <div class="block">
                <img src="sysimg/school/fc.png" />
                <p>方寸山</p>
            </div>
        </div>
        <div class="category" data-type="pets" id="pets">
            <div class="block">
                <img src="sysimg/pets/1.png">
                <p>羽云仙子</p>
            </div>
            <div class="block">
                <img src="sysimg/pets/2.png">
                <p>超级神犬</p>
            </div>
        </div>
        <div class="category" data-type="arm" id="arm">
            <div class="block">
                <img src="sysimg/arm/1.png">
                <p>青铜剑</p>
            </div>
            <div class="block">
                <img src="sysimg/arm/2.png">
                <p>铁齿剑</p>
            </div>
        </div>
        <div class="category" data-type="defence" id="defence">
            <div class="block">
                <img src="sysimg/def/1.png">
                <p>方巾</p>
            </div>
            <div class="block">
                <img src="sysimg/def/2.png">
                <p>布帽</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>