专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

在HTML中创建一个选项卡(Tab),并在选中时高亮显示当前选项卡

发布时间: 文章来源:www.iduyao.cn 采编人员:毒药  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多组选项卡示例</title>
<style type="text/css">

#tab-container{width:1200px;margin: 0 auto;}

.tab-buttonarear{height: 30px;width: 1200px;background: #F3F3F3;}
.tab-buttonarear li{display: block;height: 30px; width: auto;padding: 0 20px;text-align: center;font: 400 14px/30px 'microsoft yahei';color: #525252;float: left;border-right: 1px #DDDDDD solid; cursor: pointer;}
.tab-buttonarear .active{background: #FFF;color: #1F1F1F;border-top: 3px #07c solid;margin-top: -3px;}

</style>
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"active":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>

<body>
<div id="tab-container">
<div class="tab-buttonarear">
<ul>
<li id="A1" onclick="setTab('A',1,4)" class="active">新闻1</li>
<li id="A2" onclick="setTab('A',2,4)" >新闻2</li>
<li id="A3" onclick="setTab('A',3,4)">新闻3</li>
<li id="A4" onclick="setTab('A',4,4)">新闻4</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_A_1" >新闻列表1</div>
<div id="con_A_2" style="display:none">新闻列表2</div>
<div id="con_A_3" style="display:none">新闻列表3</div>
<div id="con_A_4" style="display:none">新闻列表4</div>
</div>
</div>
<div id="tab-container">
<div class="tab-buttonarear">
<ul>
<li id="B1" onclick="setTab('B',1,4)" class="active" >新闻1</li>
<li id="B2" onclick="setTab('B',2,4)">新闻2</li>
<li id="B3" onclick="setTab('B',3,4)">新闻3</li>
<li id="B4" onclick="setTab('B',4,4)">新闻4</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_B_1" >新闻列表1</div>
<div id="con_B_2" style="display:none">新闻列表2</div>
<div id="con_B_3" style="display:none">新闻列表3</div>
<div id="con_B_4" style="display:none">新闻列表4</div>
</div>
</div>
<div id="tab-container">
<div class="tab-buttonarear">
<ul>
<li id="C1" onclick="setTab('C',1,4)" class="active" >新闻1</li>
<li id="C2" onclick="setTab('C',2,4)">新闻2</li>
<li id="C3" onclick="setTab('C',3,4)">新闻3</li>
<li id="C4" onclick="setTab('C',4,4)">新闻4</li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_C_1" >新闻列表1</div>
<div id="con_C_2" style="display:none">新闻列表2</div>
<div id="con_C_3" style="display:none">新闻列表3</div>
<div id="con_C_4" style="display:none">新闻列表4</div>
</div>
</div>
</body> 
</html>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
   443阅读

楼上正解

毒药   277.5天前
1

看楼主的

毒药   277.5天前
2
登录 后发表评论

热门分类:

Web开发 | Web前端 | HTML/CSS | php | ASP | JavaScript | jQuery | HTML5 | vbScript | Ajax | 网页设计 | 跨浏览器开发 | 高性能WEB开发 | Web Service | XML/SOAP | CGI | 数据库 | SQL | MySQL | NoSQL | Oracle技术 | Oracle管理 | Oracle开发 | Oracle面试 | Oracle Exception | Sql Server | Informix | Sybase | DB2 | Access | VFP | 数据仓库 | 高性能数据库开发 | 其他数据库 | 移动开发 | Android | Iphone | Windows Mobile | Symbian | BlackBerry | QT开发 | Brew | MeeGo | 移动平台 | 电信IT应用开发 | 移动应用 | Java Web开发 | J2EE | J2SE | J2ME | Java面试 | Java相关 | Eclipse | Java Exception | 企业开发 | 企业信息化 | 行业应用 | GIS | SAP | Tivoli | Lotus | Exchange | SharePoint | Dynamics CRM | K2 BPM | 报表 | 嵌入开发 | WinCE | 硬件开发 | 单片机 | 汇编语言 | 驱动开发 | Wireless | VxWorks | 应用服务器 | Apache | IIS | JBoss | WebSphere | Weblogic | ColdFusion | 研发管理 | 项目管理 | 开发过程 | 开发方法 | 软件设计 | 设计模式 | 软件架构设计 | 敏捷开发 | 微创软件开发 | CVS/SVN | VSTS | PowerDesigner | Rational | 软件测试 | C# | ASP.NET | WinForm | WCF | CLR | WPF | XNA | Visual Studio | WinRT Metro | .NET Framework | VB Dotnet | VC | .NET分析设计 | .NET组件控件 | J# | Delphi | .NET报表 | LINQ | .NET新技术 | .NET面试 | .NET相关 | DotNet Exception | Linux/Unix | Solaris | AIX | 多媒体/流媒体开发 | 多媒体设计 | 交互式开发 | Flash | 图形/图像 | 图像工具使用 | Flex | AutoCAD | Silverlight | C++ | C语言 | C++ Builder | 网络通信 | PB | Ruby/Rails | Perl/Python | Erlang | Go | Swift | Verilog | 编程 | 其他开发语言 | Open API | 信息/网络安全 | IBM云计算 | Paypal | VOIP | Google技术 | 人工智能