css - 如何在切换IMg2 img3 img4的时候第一张图片消失-PHP中国語ネットワークQ&A

コミュニティ学ぶツールライブラリレジャー

日本語

css - 如何在切换IMg2 img3 img4的时候第一张图片消失

大家讲道理 2017-04-17 11:32:09

525

<!DOCTYPE html>
<html >
<head>
    <title> new document </title>
    <meta charset="utf-8" />  
    <style>
    #pic{
        width:350px;
        height:350px;
        border:1px solid #ddd;
        margin-top:20px;
    }
    #link a{
        diaplay:inline-block;
        border:1px solid #ddd;
        background-color:gray;
        padding:5px 10px;
    }
    #pic a img:not([class='pic1']){
        display:none;
    }
    #pic a:target img{
        display:block;
    }
    </style>
</head>
<body>
    <p id='link'>
        <a href='#img1'>img1</a>
        <a href='#img2'>img2</a>
        <a href='#img3'>img3</a>
        <a href='#img4'>img4</a>
    </p>
    <p id='pic'>
        <a name='img1'><img src='images/p001.jpg' class='pic1' /></a>
        <a name='img2'><img src='images/p002.jpg'  class='pic2' /></a>
        <a name='img3'><img src='images/p003.jpg'  class='pic3' /></a>
        <a name='img4'><img src='images/p004.jpg' class='pic3' /></a>
    </p>
</body>
</html>