jQ制作选项卡,下拉菜单

最新推荐文章于 2023-07-28 15:50:21 发布

王哈哈.

最新推荐文章于 2023-07-28 15:50:21 发布

阅读量442

点赞数 1

本文链接：https://blog.csdn.net/Yesterdayw/article/details/90978040

版权

1选项卡的制作

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin:0;
    padding: 0;
   }
   .nav{
    width: 50%;
    margin: 0 auto;
   }
   /*.imgMin ul{margin: 0 auto;
    display: inline-block;
   }*/
   .imgMin li{
    list-style: none;
    float: left;
    padding: 3px;
    /*margin: 0 auto;*/
   }
   .imgMin img{
    width: 50px;
    height: 50px;
   }
   .show{
    width: 230px;
    height: 230px;
   }
   .active{
    background-color:deeppink;
   }
  </style>
  <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
  <script>
   $(function(){
//    $(".show").prop("src",$(".imgMinLi img").prop("src"));
//    $(".imgMinLi").addClass("active");
//    $("img").click(function(){
//     $(".show").prop("src",$(this).prop("src"));
//     $(this).addClass("active").siblings().removeClass("active");
//    });
    $(".imgMin>li").click(function(){
//     console.log($(this));
   //先给img添加了src属性，后用prop()获取当前点击的img的src属性的值
   //bneng给图片添加active类，因为没有效果，而给li添加背景就会显示出效果
     $(this).addClass("active").siblings().removeClass("active");
//     console.log(this);
     $(".show").prop("src",$(this).children().prop("src"));
    })
   });
  </script>
 </head>
 <body>
 <div class="nav">
  <img class="show" src="img/20170219100052_uX8NE.jpg">
  <ul class="imgMin">
   <li class="imgMinLi"><img src="img/20170219100052_uX8NE.jpg"></li>
   <li><img src="img/20170510203550862.jpg"></li>
   <li><img src="img/6.jpg"></li>
   <li><img src="img/o_qyqx_qx.jpg"></li>
  </ul>
 </div>
 </body>
</html>

在这里插入图片描述
2.下拉菜单

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   .div1{width: 370px;margin: 100px auto 0;background-image:url(img/bg.jpg);}
   /*.nav{height: 30px;width: 340px;margin: 100px auto;}*/
   li{list-style: none;}
   .div1 a{text-decoration: none;
    /* color: black;*/
     height: 30px;
     width: 100px;
     text-align: center;
     line-height: 30px;
     display: block;
     color: black;
     }
   .div1 li{
     /*float: left;
     height: 30px;
     width: 110px;*/
     /*margin: 0 auto;*/
     /*display: block;*/
     /*padding: 5px;*/
     /*margin-left:5px;*/
     /*margin-right:10px;*/
     background-image: url(img/libg.jpg);
    }
    /*//.div的子代下的ul子代下的li满足的样式：*/
   .div1>ul>li{
    /*display: none;*/
    float: left;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
   }
   .div1 li ul{display: none;}
  </style>
  <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
  <script>
   $(function(){
    var lis=$(".div1 li");
    lis.mouseenter(function(){
     $(this).children("ul").show();
    })
    lis.mouseleave(function(){
     $(this).children("ul").hide();
    })
   })
  </script>
 </head>
 <body>
 <div class="div1">
  <ul>
   <li>
    <a href="#">一级菜单1</a>
    <ul>
     <li><a href="#">菜单1.1</a></li>
     <li><a href="#">菜单1.1</a></li>
     <li><a href="#">菜单1.1</a></li>
    </ul>
   </li>
   <li>
    <a href="#">一级菜单2</a>
    <ul>
     <li><a href="#">菜单2.1</a></li>
     <li><a href="#">菜单2.1</a></li>
     <li><a href="#">菜单2.1</a></li>
    </ul>
   </li>
   <li>
    <a href="#">一级菜单3</a>
    <ul>
     <li><a href="#">菜单3.1</a></li>
     <li><a href="#">菜单3.1</a></li>
     <li><a href="#">菜单3.1</a></li>
    </ul>
   </li>
  </ul>
 </div>
 </body>
</html>

在这里插入图片描述