tab切换-jquery

最新推荐文章于 2023-10-08 19:49:47 发布

小贺学习笔记

最新推荐文章于 2023-10-08 19:49:47 发布

阅读量314

点赞数

分类专栏： JQuery 文章标签： tab切换

本文链接：https://blog.csdn.net/qq_40680190/article/details/80761860

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

style.css 文件

*{
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  box-sizing:inherit;
}
.notice{
  width:298px;
  height: 98px;
  margin: 10px;
  border: 1px solid #eee;
  overflow: hidden;  
}
.notice-tit{
  height: 27px;
  position: relative;
  background: #F7F7F7;
}
ul{
  margin-bottom: 0px;
}
.netice-tit ul{
  position: absolute;
  width: 301px;
  left: -1px;
  
}
.notice-tit li{
  float: left;
  width: 57px;
  height: 26px;
  line-height: 26px; 
  text-align: center;
  overflow: hidden;
  background: #FFF;
  background: #F7F7F7;
  padding: 0 1px;
  border-bottom: 1px solid #eee;
}
.notice-tit li.select{
                            background:#FFF;
                            border-bottom-color:#FFF;
                            border-left:1px solid #eee;
                            border-right: 1px solid #eee;
                            padding: 0 0; 
                            width: 60px;
                            font-weight: bolder; }

.notice li a:link,.notice li a:visited{text-decoration: none; color: #000;}

.notice li a:hover{color: #F90;}

.notice-con .mod{margin:10px 10px 10px 19px;}

.notice-con .mod ul li{
  float: left;
  width: 134px;
  height: 25px;
  overflow: hidden;
}

html页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab切换</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
       <link  type="text/css" rel="stylesheet" href="css/style.css">
	<style>
           
	</style>
</head>
<body>
   <div id="notice" class="notice">
     <div id="notice-tit"  class="notice-tit">
        <ul>
          <li><a href="#">公告 </a></li>
          <li><a href="#">规则 </a></li>
          <li><a href="#">论坛 </a></li>
          <li><a href="#">安全 </a></li>
          <li class="select"><a href="#">公益 </a></li>
        </ul>
     </div>
     <div id="notice-con" class="notice-con" >
         <div class="mod"  style="display: none">
             <ul>
               <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li>
               <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li>
               <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li>
               <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li>
             </ul>
         </div>
         <div class="mod" style="display: none">
             <ul>
               <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li>
               <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li>
               <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li>
               <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li>
             </ul>
         </div>
         <div class="mod" style="display: none">
             <ul>
               <li><span>【<a href="">聚焦</a>】</span><a href="#">444</a></li>
               <li><span>【<a href="">视频</a>】</span><a href="#">333</a></li>
               <li><span>【<a href="">测试</a>】</span><a href="#">333</a></li>
               <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li>
             </ul>
         </div>
         <div class="mod" style="display: none">
             <ul>
               <li><span>【<a href="">画画</a>】</span><a href="#">444</a></li>
               <li><span>【<a href="">小孩</a>】</span><a href="#">333</a></li>
               <li><span>【<a href="">游戏</a>】</span><a href="#">333</a></li>
               <li><span>【<a href="">女人</a>】</span><a href="#">333</a></li>
             </ul>
         </div>
         <div class="mod" style="display: block;">
             <ul>
               <li><a href="#">个人重要信息要管劳！</a></li>
               <li><a href="#">卖家防范红包欺诈提醒</a></li>
               <li><a href="#">跟换收货地址的陷阱！</a></li>
               <li><a href="#">注意骗子的技术升级了！</a></li>
             </ul>
         </div>
     </div>
   </div>
     
<script src="js/jquery.min.js"></script>
<!-- <script src="js/script.js"></script> -->
<script src="js/bootstrap.js"></script>

<script>
  $(function(){
              $(".notice-tit ul li ").mouseenter(function() {
                   var  idx=$(this).index();
                   /*alert(idx);*/
                   $(".notice-con div").eq(idx).show().siblings('div').hide().removeClass("select");
                   $(".notice-tit ul li ").eq(idx).addClass("select").siblings('li').removeClass("select");
              });  
     });
</script>
</body>
</html>

注意需要引入jquery。

小贺学习笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab切换-jquery

style.css 文件 *{ margin: 0; padding: 0; list-style: none; font-size: 12px; box-sizing:inherit;}.notice{ width:298px; height: 98px; margin: 10px; border: 1px solid #eee; overflo...
复制链接

扫一扫