HTML Tab 选项卡

我要做的效果如图所示：

代码如下：

index.html

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html lang="en">  
 head     meta charset="UTF-8"     title>选项卡</link href="css/index.css" rel="stylesheet"script src="js/index.js" type="text/javascript">scriptbody     <!--选项卡-->  
div id="tab"         <!--选项的头部-->  
         div id="tab-header"             ul                 li class="selected">公告li                 >规则>完美>功劳>产品                 <!--<li>技术</li>-->  
                      div         <!--主要内容-->  
div id="tab-content"div class="dom" style="display: block;"                     a href="#">数据七夕:金牛爱送玫瑰a                     >阿里打造"互联网监管">10万家店60万新品>全球最大网上时装周div class="dom"                         >“全额返现”要管控啦                         >淘宝新规发布汇总(7月)>炒信规则调整意见反馈>质量相关规则近期变更>阿里建商家全链路服务>个性化的消费时代来临>跨境贸易是中小企业机>美妆行业虚假信息管控>接次文件，毁了一家店>账号安全神器阿里钱盾>新版阿里110上线了>卖家学违禁避免被处罚>为了公益high起来>魔豆妈妈在线申请html>  

index.css

index.js

// 当页面加载完毕

window.onload = function(){

// 拿到所有的标题(li标签) 和标题对应的内容(div)

var titles = $('tab-header').getElementsByTagName('li');

var divs = $('tab-content').getElementsByClassName('dom');

// 判断

if(titles.length != divs.length) return;

// 遍历

for(var i=0; ititles.length; i++){

// 取出li标签

var li = titles[i];

li.id = i;

// console.log(li);

// 监听鼠标的移动

li.onmousemove = function(){

for(var j=0; jtitles.length; j++){

titles[j].className = '';

divs[j].style.display = 'none';

}

this.className = 'selected';

divs[this.id].style.display = 'block';

}

HTML Tab 选项卡

相关文章