js实现 tab切换

月印万川文

已于 2022-04-26 11:46:33 修改

阅读量752

点赞数

分类专栏：前端文章标签：前端

于 2022-04-26 11:40:27 首次发布

本文链接：https://blog.csdn.net/m0_59388474/article/details/124408644

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

pc端
@media screen and (min-width: 768px) {}
手机端
@media screen and (max-width: 768px) {}

代码实现

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
 <style>
 .cardtab{
	 /* 默认无边框 */
	  border: none;	  
	   box-sizing: border-box;
	   width: 100%;  
	   display: flex;
	   /* 均匀排列每个元素每个元素周围分配相同的空间 */
	   justify-content: space-around;
 }
  .item {
   width: 50%;
             /* 行内块元素 */
   display: inline-block;
   text-align: center;
   height: auto;
   line-height: 40px;
   font-size: 1.4em;
   /* 鼠标指针放在一个元素边界范围内时所用的光标形状 （一只手） */
   cursor: pointer;
   font-weight: bolder;
 }
 /* 边框 */
 #firstTab {
  
   background-repeat: no-repeat;    
   background-position: 95% 80%;
   background-size: 75px 40px;
   border: 1px solid red;
   border-bottom: 2px solid #0000cc;
   color: red;
   background-color: white;
 
 }
 
 #firstTab.active {
   color: white;
   background-color: red;
   border-bottom: none;
 }
 
 #secondTab {
   border: 1px solid #0000cc;
   border-bottom: 2px solid red;
   color: #0000cc;
   background-color: white;
 }
 
 #secondTab.active {
   color: white;
   background-color:  #0000cc;
   border-bottom: none;
 }

 #firstTab.active .tab_sharp,#secondTab.active .tab_sharp{
   background-color: white;
 }
 #firstTab .tab_sharp{
   background-color: red;
 }
 #secondTab .tab_sharp{
   background-color: #0000cc;
 }
 .tab_sharp{
   width: 97%;
   height: 5px;
   margin: 5px auto;
 }
 .card_container {
   border: 2px solid red;
   margin-top: -2px;
   
 }
 </style>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </head> 
 <body> 
 <div class="cardtab"> 
 <a class="item active" id="firstTab" data-tab = "first">
	 <div class="tab_sharp"></div>
	 第一个表
 </a>
 
 <a class="item" id="secondTab" data-tab="second" href="javascript:void(0)" 	>
	 <div class="tab_sharp"></div>
	 第二个表
 </a>
 
 </div>
 <div class="card_container">
 <div class=" card_content" data-tab="first" align="center">
	 <p>我是第一个表的内容</p>
 </div>
  <div class=" card_content" data-tab="second" hidden align="center">
	  <p>我是第二个表的内容</p>
  </div>
  </div>
  <script>

              $(document).ready(function () {
                  // card
                  var target;
                  $(".cardtab .item").on("click", function () {
                      if (target != $(this).data("tab")) {
                          target = $(this).data("tab");
                          var color = $(this).css("color");
						 /* //siblings()用于查找当前元素的同胞元素，主要作用就是除了自己外的其他同胞元素设置样式或者其他事件。 */ 
                          $(this).removeClass("active").addClass("active").siblings().removeClass("active")
                          $(".card_content[data-tab=" + target + "]").show().siblings().hide();
                          $(".card_container").css({
                              "border-color": color,
                              "border-top-color": "transparent"
                          })
                      }
                  })
              });
  </script>
 </body>
</html>

详细可见：菜鸟编辑器

月印万川文

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
js实现 tab切换

pc端@media screen and (min-width: 768px) {}手机端@media screen and (max-width: 768px) {}代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style> .cardtab{ /* 默认无边框 */ border: none; box-sizi..
复制链接

扫一扫