HTML Tab 选项卡

最新推荐文章于 2024-07-25 11:34:59 发布
最新推荐文章于 2024-07-25 11:34:59 发布
阅读量1.1w 收藏 19
点赞数 2
分类专栏： # WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yilovexing/article/details/78873111
版权

我要做的效果如图所示：

 

代码如下：

index.html

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>选项卡</title>  
  6.     <link href="css/index.css" rel="stylesheet">  
  7.     <script src="js/index.js" type="text/javascript"></script>  
  8. </head>  
  9. <body>  
  10.     <!--选项卡-->  
  11.     <div id="tab">  
  12.         <!--选项的头部-->  
  13.         <div id="tab-header">  
  14.             <ul>  
  15.                 <li class="selected">公告</li>  
  16.                 <li>规则</li>  
  17.                 <li>完美</li>  
  18.                 <li>功劳</li>  
  19.                 <li>产品</li>  
  20.                 <!--<li>技术</li>-->  
  21.             </ul>  
  22.         </div>  
  23.         <!--主要内容-->  
  24.         <div id="tab-content">  
  25.             <div class="dom" style="display: block;">  
  26.                 <ul>  
  27.                     <li><a href="#">数据七夕:金牛爱送玫瑰</a></li>  
  28.                     <li><a href="#">阿里打造"互联网监管"</a></li>  
  29.                     <li><a href="#">10万家店60万新品</a></li>  
  30.                     <li><a href="#">全球最大网上时装周</a></li>  
  31.                 </ul>  
  32.             </div>  
  33.             <div class="dom">  
  34.                 <ul>  
  35.                     <li>  
  36.                         <a href="#">“全额返现”要管控啦</a>  
  37.                     </li>  
  38.                     <li>  
  39.                         <a href="#">淘宝新规发布汇总(7月)</a>  
  40.                     </li>  
  41.                     <li>  
  42.                         <a href="#">炒信规则调整意见反馈</a>  
  43.                     </li>  
  44.                     <li>  
  45.                         <a href="#">质量相关规则近期变更</a>  
  46.                     </li>  
  47.                 </ul>  
  48.             </div>  
  49.             <div class="dom">  
  50.                 <ul>  
  51.                     <li>  
  52.                         <a href="#">阿里建商家全链路服务</a>  
  53.                     </li>  
  54.                     <li>  
  55.                         <a href="#">个性化的消费时代来临</a>  
  56.                     </li>  
  57.                     <li>  
  58.                         <a href="#">跨境贸易是中小企业机</a>  
  59.                     </li>  
  60.                     <li>  
  61.                         <a href="#">美妆行业虚假信息管控</a>  
  62.                     </li>  
  63.                 </ul>  
  64.             </div>  
  65.             <div class="dom">  
  66.                 <ul>  
  67.                     <li>  
  68.                         <a href="#">接次文件，毁了一家店</a>  
  69.                     </li>  
  70.                     <li>  
  71.                         <a href="#">账号安全神器阿里钱盾</a>  
  72.                     </li>  
  73.                     <li>  
  74.                         <a href="#">新版阿里110上线了</a>  
  75.                     </li>  
  76.                     <li>  
  77.                         <a href="#">卖家学违禁避免被处罚</a>  
  78.                     </li>  
  79.                 </ul>  
  80.             </div>  
  81.             <div class="dom">  
  82.                 <ul>  
  83.                     <li>  
  84.                         <a href="#">为了公益high起来</a>  
  85.                     </li>  
  86.                     <li>  
  87.                         <a href="#">魔豆妈妈在线申请</a>  
  88.                     </li>  
  89.                 </ul>  
  90.             </div>  
  91.         </div>  
  92.     </div>  
  93. </body>  
  94. </html>  


index.css

[html]  view plain  copy
  1. a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{  
  2.     padding: 0;  
  3.     margin: 0;  
  4. }  
  5.   
  6.   
  7. a{  
  8.     color: black;  
  9.     text-decoration: none;  
  10. }  
  11. ul{  
  12.     list-style: none;  
  13. }  
  14.   
  15. #tab{  
  16.     width: 498px;  
  17.     height: 130px;  
  18.     border: 1px solid #ddd;  
  19.     box-shadow: 0 0 2px #ddd;  
  20.     margin: 100px 0 0 100px;  
  21.     /*处理超出的内容*/  
  22.     overflow: hidden;  
  23. }  
  24.   
  25. /*选项卡的头部*/  
  26. #tab-header{  
  27.     background-color: #F7F7F7;  
  28.     height: 33px;  
  29.     text-align: center;  
  30.     position: relative;  
  31. }  
  32. #tab-header ul{  
  33.     width: 500px;  
  34.     position: absolute;  
  35.     left: -1px;  
  36. }  
  37. #tab-header ul li{  
  38.     float: left;  
  39.     width: 98px;  
  40.     height: 33px;  
  41.     line-height: 33px;  
  42.     padding: 0 1px;  
  43.     border-bottom: 1px solid #dddddd;  
  44. }  
  45. #tab-header ul li.selected{  
  46.     background-color: white;  
  47.     font-weight: bolder;  
  48.     border-bottom: 0;  
  49.     border-left: 1px solid #dddddd;  
  50.     border-right: 1px solid #dddddd;  
  51.     padding: 0;  
  52.   
  53. }  
  54.   
  55. #tab-header ul li:hover{  
  56.     color: orangered;  
  57. }  
  58.   
  59. /*主要内容*/  
  60. #tab-content .dom{  
  61.     display: none;  
  62. }  
  63.   
  64. #tab-content .dom ul li{  
  65.     float: left;  
  66.     /*background-color: red;*/  
  67.     margin: 15px 10px;  
  68.     width: 225px;  
  69. }  
  70.   
  71. #tab-content .dom ul li a:hover{  
  72.     color: orange;  
  73. }  


index.js

[html]  view plain  copy
  1. // == 值比较  === 类型比较 $(id) ---->  document.getElementById(id)  
  2. function $(id){  
  3.     return typeof id === 'string' ? document.getElementById(id):id;  
  4. }  
  5.   
  6. // 当页面加载完毕  
  7. window.onload = function(){  
  8.     // 拿到所有的标题(li标签) 和 标题对应的内容(div)  
  9.     var titles = $('tab-header').getElementsByTagName('li');  
  10.     var divs = $('tab-content').getElementsByClassName('dom');  
  11.     // 判断  
  12.     if(titles.length != divs.length) return;  
  13.     // 遍历  
  14.     for(var i=0; i<titles.length; i++){  
  15.         // 取出li标签  
  16.         var li = titles[i];  
  17.         li.id = i;  
  18. //        console.log(li);  
  19.         // 监听鼠标的移动  
  20.         li.onmousemove = function(){  
  21.             for(var j=0; j<titles.length; j++){  
  22.                 titles[j].className = '';  
  23.                 divs[j].style.display = 'none';  
  24.             }  
  25.             this.className = 'selected';  
  26.             divs[this.id].style.display = 'block';  
  27.         }  
  28.     }  
  29.   
  30. }  
极客点儿
关注
专栏目录
html tab选项卡动画,基于HTML5 Tab选项卡动画切换特效
weixin_42517317的博客
06-03 1321
基于HTML5 Tab选项卡动画切换特效。这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs。效果图如下：实现的代码。html代码：ConnectGiftsBoxesPrintsFun12345(function() {[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( functio...
html tab 选项卡切换,jQuery实现TAB选项卡切换特效简单演示
weixin_42490307的博客
06-03 748
本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下1、tab切换 onjQuery tab切换*{margin:0;padding:0;}.wrap{margin-left: 50px;margin-top: 50px;}/*清浮动---clearfix*/.clearfix {*zoom: 1;}.clearfix:after {content: "";clear:...
HTML tab菜单选项
issac_xiao的专栏
11-10 1332
我们的目标是要做这个一个tab菜单选项，如图：             讲解的步骤如下：    1.分解图形，我们最先可能不需要完成这么复杂的图片效果，只需要达到如下功能即可：      这部分比较好设计，大概是由两个div组成，每个div内都是无序列表，大体HTML结构如下：       Home Web Dev Web Design Map 1.
HTML实现Tab选项卡（自动+手动）
03-06
tab选项卡是常见的网页效果，也叫滑动门特效，本资源实现自动调转和手动（click onmouseover）切换
HTML中的空格、Tab、书名号大于号以及常用特殊符号
最新发布
w710537643的博客
07-25 80
在HTML页面中，有一些特殊的符号我们想使用，但是呢又不方便直接使用，那么我们就可以用一些实体名称来代替。注： 实体名称对大小写敏感。有关更多特殊符号可以查看。
HTML Tab选项卡
黑码哥的技术博客
07-26 3万+
HTML Tab选项卡 选项卡 公告 规则 完美 功劳
html 实现tab选项卡
qq_42033668的博客
10-10 4794
【代码】html 实现tab选项卡。
html tab选项卡实现
01-14
html 及 css 实现的tab选项卡。十分简洁。
html tab选项卡
alane1986的专栏
01-14 1748
 需要两个文件tab.jsp及tab.css.1-tab.jsp如下。 Tab function setTab(n){ var tli=document.getElementById("menu").getElementsByTagName("li"); var mli=document.getElementById("main").ge
jQuery封装的tab选项卡插件分享
10-24
### jQuery封装Tab选项卡插件知识点 #### 1. 什么是Tab选项卡？ Tab选项卡是一种常见的网页界面元素，用于在同一页面内切换显示不同的内容区域，每个内容区域通常被称为一个“面板”（Panel）。用户点击不同的Tab...
html tab选项卡 控件,tab选项卡插件
weixin_33273250的博客
06-03 576
这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用的。常见的方式是在同一个页面中显示不同的选项，并通过标签可以进行导航。另一个有用的地方是后台管理界面，在这里用户通常需要快速的切换各种管理界面。这个tab选项卡插件的代码是否简单，使用一点CSS和jQuery来切换tabs的...
html选项卡
12-06
很简单的html选项卡，适合刚开始学习html的同学，非常实用。
HTML选项卡
03-05
HTML选项卡, jquery 选项卡 HTML选项卡, jquery 选项卡
选项卡.html
10-25
选项卡选择
HTML Tab选项卡制作
weixin_57765394的博客
09-08 183
HTML部分的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/ht
HTML——tab标签
热门推荐
最好的时光里
12-16 5万+
前言   小编最近在做项目的时候前端需要tab标签来进行角色分类，小编的公司用的是angular，虽然一般情况下angular挺好用的，但是这次例外了，angular的标签并不能良好的达到我想要的效果，于是小编找了一个html改装的tab，如下： html内容如下 &amp;lt;div class=&quot;tabs&quot;&amp;gt; &amp;lt;div class=&quot;tab-2&quot;&amp;gt
HTML中tab选项卡制作
Moriarty的专栏
03-06 1万+
这次要做的是tab选项卡，也叫滑动门。具体是什么呢？如图 当我鼠标滑过上边标题栏的某一li时，下边显示的内容进行相应的改变。这个在门户网站经常用到。具体怎么做呢？其实很简单啦，只需要当我鼠标滑过某一标题li时，把下边的对应的div设置为block，其余的设置为display：none就可以了。下面说一下具体实现的细节. HTML部分： 在一个tabs的div里面放一个tabs-t
html tab选项卡 控件,Tab选项卡组件
weixin_42522275的博客
06-03 900
Tab选项卡组件Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成选项卡控件的开发。依赖appcan.jsappcan.control.jsappcan.tab.jsappcan.control.cssJS对象函数appcan.tab({参数})selector: /*选择器*/,hasIcon : true or false /...
使用HTML和JS实现Tab选项卡
"Tab选项卡 html js - YahooѡЧ-www.webdm.cn" 这篇文章主要介绍了如何使用HTML、CSS和JavaScript实现一个基本的Tab选项卡功能。Tab选项卡是网页设计中常用的一种交互元素，它允许用户在多个相关但独立的内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值