HTML Tab选项卡制作

最新推荐文章于 2024-09-22 14:11:19 发布

weixin_57765394

最新推荐文章于 2024-09-22 14:11:19 发布

阅读量230

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_57765394/article/details/120183110

版权

html 专栏收录该内容

9 篇文章

订阅专栏

这是一个使用HTML和JavaScript实现Tab切换效果的代码示例。通过为HTML元素添加样式和事件监听，当鼠标悬停在不同的选项上时，内容区域会相应显示不同的模块。示例中展示了如何通过JavaScript动态修改元素的样式和内容展示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Tab效果</title>

<style>

margin:0;

padding:0;

list-style:none;

font-size:12px;

}

.notice{

width:298px;

height:98px;

margin:10px;

border:1px solid #eee;

overflow:hidden;

}

.notice-tit{

position:relative;

height:27px;

background-color:#f7f7f7;

}

.notice-tit ul{

position:absolute;

width:301px;

left:-1px;

}

.notice-tit li{

float:left;

width:58px;/*298/5*/

height:26px;

line-height:26px;

text-align:center;

overflow:hidden;

padding:1px;/*防止高亮时候出现左右边框改变div的大小*/

border-bottom:1px solid #eee;

}

.notice li a{

text-decoration:none;

color:#000;

}

.notice li a:hover{

color:#c00;

}

.notice-tit ul .select{

background:#fff;

border-bottom:#fff;

border-left:1px solid #eee;

border-right:1px solid #eee;

padding:0;

font-weight:bolder;

}

.mod{

margin:15px 10px 10px 19px;

}

.mod ul li{

width:134px;

float:left;

height:25px;

overflow:hidden;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</li>

</ul>

</div>

<ul>

<li>

<a href="#">阿里5.3亿港币投资银泰</a>

</li>

<li>

<a href="#">总理强调扶持新兴业态</a>

</li>

<li>

<a href="#">马云忆与乔布斯论创新</a>

</li>

<li>

<a href="#">7万实名家政阿姨入手淘</a>

</li>

</ul>

</div>

<ul>

<li>

<span>

[

]

</span>

<a href="#">抽检规则发布</a>

</li>

<li>

<span>

[

]

</span>

<a href="#">抽检规则发布</a>

</li>

<li>

<span>

[

]

</span>

<a href="#">抽检规则发布</a>

</li>

<li>

<span>

[

]

</span>

<a href="#">抽检规则发布</a>

</li>

</ul>

</div>

<ul>

<li>

<span>

[

]

</span>

<a href="#">称谓滥用将整</a>

</li>

<li>

<span>

[

]

</span>

<a href="#">称谓滥用将整</a>

</li>

<li>

<span>

[

]

</span>

<a href="#">称谓滥用将整</a>

</li>

<li>

<span>

[

]

</span>

<a href="#">称谓滥用将整</a>

</li>

</ul>

</div>

<ul>

<li>

<a href="#">个人重要信息要管牢</a>

</li>

<li>

<a href="#">个人重要信息要管牢</a>

</li>

<li>

<a href="#">个人重要信息要管牢</a>

</li>

<li>

<a href="#">个人重要信息要管牢</a>

</li>

</ul>

</div>

<ul>

<li>

<a href="#">公益讲师招募就等你啦</a>

</li>

<li>

<a href="#">公益讲师招募就等你啦</a>

</li>

<li>

<a href="#">公益讲师招募就等你啦</a>

</li>

<li>

<a href="#">7公益讲师招募就等你啦</a>

</li>

</ul>

</div>

</body>

</html>

JS部分带码（要新建文件夹）

// JavaScript Document

//页面加载

window.onload = function(){

//获取元素

var titles = document.getElementById('notice-tit').getElementsByTagName('li');

var divs = document.getElementById('notice-con').getElementsByTagName('div');

//测试获取元素的长度

//alert(titles.length);

//判断标题和对应内容的长度是否一致；若不一致则不执行下面的语句；

if(titles.length != divs.length)

return;

//遍历titles下面的所有li

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

titles[i].id = i;

titles[i].onmouseover = function(){

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

//清除高亮样式；

titles[j].className = '';

//在鼠标移入的同时清除内容栏的内容

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

}

//测试鼠标移入事件

//alert(this.id);

//添加高亮样式；

this.className = 'select';

//显示鼠标所到标题索引所对应的内容

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

}

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！