zoukankan      html  css  js  c++  java
  • Jquery实现横向tab切换

     //需求:鼠标放在不同的导航栏上,下面显示的内容自动切换

      


     

    //代码如下

    <!DOCTYPE html>

    <html lang="en">

    <head>

       <meta charset="UTF-8">

       <title>Document</title>

       <script type="text/javascript" src="jquery.1.11.1.min.js"></script>

       <style type="text/css">

          *{

             margin: 0;

             padding: 0;

          }

          ul{

             list-style: none;

          }

          .tab{

             width: 300px;

             border: 1px solid #000;

             overflow: hidden;

             background-color: #ddd;

          }

          .tab li{

             height: 30px;

             line-height: 30px;

             width: 50px;

             float: left;

             text-align: center;

          }

          .tab .act{

             height: 28px;

             line-height: 28px;

             border-top: 2px solid orange;

             background-color: white;

          }

          .con{

             width: 300px;

             border:1px solid #000;

          }

          .con li{

             height: 300px;

             display: none;

             text-align: center;

             line-height: 300px;

          }

          .con .show{

             display: block;

          }

       </style>

    </head>

    <body>

       <ul class="tab">

          <li class="act">图片</li>

          <li>专栏</li>

          <li>热点</li>

       </ul>

       <ul class="con">

          <li class="show">图片</li>

          <li>专栏</li>

          <li>热点</li>

       </ul>

     

       <script type="text/javascript">

          $(".tab li").mouseover(function(){

             // 进入元素的索引,找到当前li的索引

             var index = $(this).index();

             //console.log(index);

             // tab栏的切换

             $(this).addClass("act").siblings().removeClass("act");

             // con栏的切换

             $(".con li").eq(index).addClass("show").siblings().removeClass("show");

          })

       </script>

    </body>

    </html>

  • 相关阅读:
    Unix配置定时执行任务
    在Mac上使用Make编译时出现clang: error: unsupported option '-fopenmp'的解决办法
    git的一些操作
    Github误上传多余的文件夹后解决办法
    Ubuntu18.04安装使用YOLOv3
    本地IDEA中使用Spark直连集群上的Hive
    如何利用dokcer提交我的比赛代码
    Activiti7之整合spring和spring boot
    Activiti7之网关
    Activiti7之组任务
  • 原文地址:https://www.cnblogs.com/binghuaZhang/p/10848948.html
Copyright © 2011-2022 走看看