老师麻烦检查一下

来源：3-5 编程练习

WJ沪00001

2019-06-02 09:17:46

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
 .container {
            width: 240px;
 height: 185px;
 margin: 0 auto;
 overflow: hidden;
 }
 
        .conTitle {
            height: 50px;
 }
 
        nav {
            width: 25%;
 height: 50px;
 line-height: 50px;
 text-align: center;
 float: left;
 background-color: #000;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 }
 
        nav:hover {
            background-color: #ddd;
 color: #000;
 }
 
        .content {
            position: relative;
 }
 
        .img1 {
            opacity: 1;
 }
 
        img {
            position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 }
    </style>
</head>
 
<body>
<div class="container">
    <div class="conTitle">
        <nav>pwa</nav>
        <nav>node</nav>
        <nav>vue</nav>
        <nav>小程序</nav>
    </div>
    <div class="content">
        <img class="img1" src="img/1.jpg"/>
        <img class="img2" src="img/2.jpg"/>
        <img class="img3" src="img/3.jpg"/>
        <img class="img4" src="img/4.jpg"/>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
        $("nav").click(function() {
            $('img')// 此处写代码
 .eq($(this).index())
                .css({'opacity':'1'})
                .siblings()
                .css({'opacity':'0'})
        })
    })
</script>
</body>
 


</html>

写回答

1回答