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

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

你可能感兴趣的:(JavaScript,CSS,jQuery)