老师，这样是对的吗？我用的ul>li写的导航，我看别的同学都用nav，这样可以吗？求详解

来源：3-5 编程练习

李可意

2019-06-11 15:31:25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./3-5.css">
    <script src="../jQuery.js"></script>
    <script src="./3-5.js"></script>
</head>
<body>
    <ul>
        <li href="#">HTML</li>
        <li href="#">CSS</li>
        <li href="#">JS</li>
        <li href="#">Vue</li>
    </ul>
    <div>
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

ul{
    width: 400px;
    height: 50px;
    margin: auto;
}
ul>li{
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: #fff;
    float: left;
    background: #000;
    line-height: 50px;
    text-align: center;
    list-style: none;
}
li:hover{
    color: #000;
    background: #333;
    cursor:pointer;
}

div{
    width: 400px;
    height: 300px;
    position: relative;
    margin: auto;
}
div>img{
    width: 400px;
    height: 300px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

$(document).ready(function(){
    $('li').click(function(){
        $('img')
        .eq($(this).index())
        .css({'opacity':1})
        .siblings()
        .css({'opacity':0});
    });
});

写回答

3回答