`
zjx2388
  • 浏览: 1328991 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

html中tab的简单实现

    博客分类:
  • Page
 
阅读更多

html中tab的简单实现

 

<!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/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
 margin:0 auto;
 padding:0;
}
body{
 font:12px "宋体";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{
 list-style:none;
}
.main{
 clear:both;
 padding:8px;
 text-align:center;
}
/*第一种形式*/
#tabs0 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
.menu0{
 width: 400px;
}
.menu0 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
 background: #FFFFff;
}
.menu0 li.hover{
 background: #f2f6fb;
}
#main0 ul{
 display: none;
}
#main0 ul.block{
 display: block;
}
/*第二种形式*/
#tabs1{
 text-align:left;
 width:400px;
}
.menu1box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
}
#menu1{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu1 li{
 float:left;
 display:block;
 cursor:pointer;
 width:72px;
 text-align:center;
 line-height:21px;
 height:21px;
}
#menu1 li.hover{
 background:#fff;
 border-left:1px solid #333;
 border-top:1px solid #333;
 border-right:1px solid #333;
}
.main1box{
 clear:both;
 margin-top:-1px;
 border:1px solid #333;
 height:181px;
 width:400px;
}
#main1 ul{
 display: none;
}
#main1 ul.block{
 display: block;
}
/*第三种形式*/
.menu2box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
 background: #FFFFff;
}
#tabs2 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
#tip2{
 position:absolute;
 top:0;
 left:0;
 height:22px;
 line-height:22px;
 z-index:0;
 width:100px;
 background: #f2f6fb;
}
#menu2{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu2 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
 if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
 document.getElementById("tip"+m).style.left=n*100+'px';
 document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<br />
<br />
<!--第一种形式-->
<div id="tabs0">
 <ul class="menu0" id="menu0">
  <li onclick="setTab(0,0)" class="hover">新闻</li>
  <li onclick="setTab(0,1)">评论</li>
  <li onclick="setTab(0,2)">技术</li>
  <li onclick="setTab(0,3)">点评</li>
 </ul>
 <div class="main" id="main0">
  <ul class="block"><li>新闻列表</li></ul>
  <ul><li>评论列表</li></ul>
  <ul><li>技术列表</li></ul>
  <ul><li>点评列表</li></ul>
 </div>
</div>
<br />
<br />
<!--第二种形式-->
<div id="tabs1">
 <div class="menu1box">
  <ul id="menu1">
   <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
   <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
   <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
   <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
  </ul>
 </div>
 <div class="main1box">
  <div class="main" id="main1">
   <ul class="block"><li>新闻列表</li></ul>
   <ul><li>评论列表</li></ul>
   <ul><li>技术列表</li></ul>
   <ul><li>点评列表</li></ul>
  </div>
 </div>
</div>
<br />
<br />
<!--第三种形式-->
<div id="tabs2">
 <div class="menu2box">
  <div id="tip2"></div>
  <ul id="menu2">
   <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
   <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
   <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
   <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
  </ul>
 </div>
  <div class="main" id="main2">
新闻内容
 </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

 

效果图:

   

 

  • 大小: 20.6 KB
分享到:
评论

相关推荐

    tab页的实现方法 实现tab

    使用纯HTML和CSS,你可以创建一个简单的Tab结构,通过CSS控制隐藏和显示内容。通过JavaScript添加交互性,比如点击Tab时切换内容。例如,可以使用`&lt;input type="radio"&gt;`作为Tab按钮,`&lt;div&gt;`作为内容区,通过...

    html tab选项卡实现

    在这个主题中,我们将深入探讨如何使用 HTML 和 CSS 实现一个简洁的选项卡功能。 首先,HTML 结构是构建选项卡的基础。一个简单的选项卡通常包含一个容器(如`&lt;div&gt;`),里面有两个主要部分:一个是用于显示选项卡...

    Web开发中Tab页的简单实现

    总结来说,实现Web开发中的简单Tab页,主要涉及HTML结构布局、CSS样式设计以及JavaScript交互逻辑。理解这些基本原理后,开发者可以根据项目需求选择合适的方法和技术栈进行实现。在LeoSolution提供的压缩包文件中,...

    基于vue多tab页实现

    在Vue.js框架中,多标签页(Tab)的实现是一个常见的需求,特别是在构建复杂的Web应用时,它能够帮助用户组织和切换不同的视图或功能。本教程将详细讲解如何使用Vue.js来创建一个简单的多标签页系统,并提供了一个...

    纯HTML和CSS实现Tab切换效果

    在网页设计中,Tab切换效果是一种常见的交互设计模式,它允许用户通过点击不同的标签来切换显示不同的内容区域。本教程将详细介绍如何仅使用HTML和CSS技术实现这种效果,无需依赖JavaScript进行动态控制。 首先,...

    html tab 实现

    HTML Tab 实现是一种常见的网页设计技术,用于组织和展示页面上的多部分内容,让用户可以在不同的面板之间切换,提高用户体验。在不使用任何JavaScript库或框架的情况下,纯HTML和CSS也能实现基本的Tab组件。本篇...

    jQuery实现简单tab切换

    以下是一个简单的实现步骤: 1. **HTML结构**:首先,创建Tab按钮和内容区域的HTML结构。通常,我们将Tab按钮设置为链接(`&lt;a&gt;`标签)或者按钮(`&lt;button&gt;`标签),内容区域使用`&lt;div&gt;`标签,并设置初始状态下所有...

    html5 滑动页面切换tab

    HTML5滑动页面切换Tab是现代网页设计中常见的一种交互方式,它允许用户通过滑动手势或点击Tab来浏览不同的内容区域。这种功能在移动设备上尤其流行,因为触摸屏的交互方式更适合滑动操作。以下是对这个主题的详细...

    JavaScript实现tab栏切换效果

    这个简单的 JavaScript 实现依赖于元素的索引和类名的管理,使得用户可以通过点击 Tab 标签轻松切换页面内容。这种功能在很多网页应用中都很常见,例如产品介绍、用户设置、数据统计等场景。 总的来说,这个示例...

    Asp.net2.0实现简易菜单Tab切换

    通过以上步骤,你可以在Asp.net 2.0环境中轻松实现一个简易的菜单Tab切换功能。这个功能对于提升网站的用户体验有着显著的作用,同时也能帮助开发者更好地组织和展示Web应用程序的内容。在实际开发过程中,还可以...

    h5实现移动端横向滚动tab,并响应内容

    一个简单的Tab布局可以由一个包含多个`&lt;div&gt;`的容器组成,每个`&lt;div&gt;`代表一个Tab。我们可以使用CSS的`display: flex`属性来实现水平排列,同时通过`overflow-x: auto`来启用横向滚动。`&lt;div&gt;`内部则包含相应Tab的...

    Jquery实现tab切换

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得实现Tab切换功能变得更加简单。下面我们将详细讨论如何使用jQuery实现Tab切换功能。 首先,我们需要在HTML中构建Tab的结构。一个...

    bootstrap 多层tab标签实现

    在多层Tab标签实现中,我们将有主Tab和子Tab。主Tab与基本Tab组件类似,但每个主Tab下面会有一个子Tab导航。子Tab可以通过嵌套`&lt;ul&gt;`来创建,并使用`data-parent`属性指向其对应的主Tab的`id`。 ```html ...

    js实现tab菜单效果

    至此,一个简单的JS实现的Tab菜单效果就完成了。这个基础的实现可以作为起点,根据实际需求进行扩展,例如添加键盘导航支持、触发动画、响应式布局等特性。理解这一过程对于网页开发者来说至关重要,因为它能帮助...

    js简单实现tab滚动方法

    本教程将基于提供的`tab2011.css`和`tab2011.js`文件,探讨如何通过JavaScript实现一个简单的Tab滚动方法。 首先,`tab2011.css`文件通常包含样式规则,用于定义Tab导航条以及内容区域的布局和样式。例如,它可能...

    html_Tab.zip_ js tab_Tabú_html tab_js tab_tab

    在本案例中,"html_Tab.zip_ js tab_Tabú_html tab_js tab_tab" 提供了一个关于如何使用这两种技术创建动态Tab组件的示例。Tab组件通常用于将大量内容组织成可切换的不同部分,提高用户体验,使页面看起来更整洁、...

    【JavaScript源代码】JavaScript实现简易tab栏切换案例.docx

    JavaScript 实现简易 tab 栏切换是一种常见的网页交互功能,它允许用户通过点击不同的选项卡来切换显示的内容。在本文中,我们将深入理解如何使用 JavaScript 来实现这一效果,并结合给出的代码片段进行详细讲解。 ...

    纯css3实现的tab标签切换效果

    以下是一个简单的Tab切换实现步骤: 1. 创建HTML结构,包括Tab按钮和内容区域,每个Tab按钮对应一个内容区域。 2. 使用CSS3选择器为Tab按钮添加默认样式和激活状态样式。 3. 利用Flexbox布局将Tab按钮水平排列。 4....

    tab切换html代码

    "tab切换html代码"通常涉及HTML、CSS和JavaScript(或者jQuery)的结合使用,以实现这种功能。 HTML部分: HTML是构建页面结构的基础,一般会创建一个包含多个`&lt;div&gt;`的容器,每个`&lt;div&gt;`代表一个tab面板,而`&lt;ul&gt;`...

    使用HTML+CSS编写一个灵活的Tab页

    在网页设计中,Tab页是一种常见的用户界面元素,它能够帮助组织和展示大量信息,使得用户可以方便地在不同内容间切换。本教程将详细讲解如何使用HTML和CSS来创建一个灵活、响应式的Tab页。 首先,我们需要创建HTML...

Global site tag (gtag.js) - Google Analytics