我要做的效果如图所示:
代码如下:
index.HTML
[HTML] view plain copy <!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 选项卡全部内容,希望文章能够帮你解决HTML Tab 选项卡所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)