`

tab选项卡

 
阅读更多
<style>
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
list-style:none;
margin:0;
padding:0;
height:29px;
background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li{
float:left;
padding:0;
height:29px;
margin-right:1px;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li a{
display:block;
line-height:29px;
padding:0 20px;
color:#333;
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;
white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
color:#F30;
text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
color:#F30;
text-decoration:none;
}
div.HackBox {
padding : 2px 2px ;
border-left: 2px solid #6697CD;
border-right: 2px solid #6697CD;
border-bottom: 2px solid #6697CD;
display:none;
}

</style>



<div id="Whatever">
<ul class="TabBarLevel1" id="TabPage1">
<li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li>
<li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>
<li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li>
<li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li>
</ul>
<div id="cnt">
<div id="dTab1" class="HackBox">我为每一次的快乐而哭泣,我为每一次的悲伤而微笑。
</div>
<div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】

</div>
<div id="dTab3" class="HackBox">学习是件头疼的事,为了能活下去我不得不学习

</div>
<div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁
</div>
</div>
</div>
<script language="JavaScript">
//Switch Tab Effect
function switchTab(tabpage,tabid){
var oItem = document.getElementById(tabpage);
for(var i=0;i<oItem.children.length;i++){
var x = oItem.children(i);
x.className = "";
var y = x.getElementsByTagName('a');
y[0].style.color="#333333";
}
document.getElementById(tabid).className = "Selected";
var dvs=document.getElementById("cnt").getElementsByTagName("div");
for (var i=0;i<dvs.length;i++){
if (dvs[i].id==('d'+tabid))
dvs[i].style.display='block';
else
dvs[i].style.display='none';
}
}

</script>
分享到:
评论

相关推荐

    13个css tab选项卡

    在网页设计中,CSS Tab选项卡是一种常见的交互元素,它允许用户通过点击不同的标签来查看或切换不同的内容区域。这种设计模式在很多网站上都能看到,例如设置面板、产品介绍等场景。本教程将深入探讨如何创建13种...

    不规则TAB选项卡JS代码

    不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言,它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...

    layui Tab选项卡切换跟随特效(源码)

    首先,layui的Tab选项卡是一个常见的页面布局元素,用于将大量内容组织成清晰、简洁的模块,用户可以通过点击不同的选项卡来切换显示的内容。这种功能在展示多层级信息或者避免页面过于拥挤时特别有用。在layui中,...

    HTML实现Tab选项卡(自动+手动)

    HTML中的Tab选项卡是一种常用的网页布局和交互设计,它能够有效地组织和展示大量信息,同时保持页面整洁。这种效果通常由一组可切换的面板组成,每个面板代表一个独立的内容区域,用户可以通过点击或悬停在不同的...

    tab选项卡 很经典的选项卡

    "Tab选项卡"是这种交互模式的一种实现方式,通常在网页顶部或侧边设置,每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签:每个选项卡都...

    漂亮的JSP TAB选项卡

    "漂亮的JSP TAB选项卡"是一个专为提高用户体验而设计的组件,它在网页上以选项卡的形式组织内容,用户可以通过点击不同的选项卡来切换查看不同的页面部分。这种设计方式极大地优化了网页的布局,减少了页面滚动的...

    纯css3经典tab选项卡动画特效

    纯CSS3经典Tab选项卡动画特效是一种无需JavaScript插件,仅通过CSS3属性实现的交互设计。这种技术在现代网页设计中广泛应用,因为其能够提供流畅的用户体验且减少了对JavaScript的依赖,从而优化了页面加载速度。...

    TAB选项卡后台菜单效果

    "TAB选项卡后台菜单效果"是一个专为后台管理系统设计的功能,它旨在提供高效、直观且易于导航的操作界面。在这个主题下,我们将深入探讨选项卡在后台菜单中的应用、实现方式以及它们对用户体验的影响。 选项卡是一...

    非常好的一个tab选项卡

    【标题】:“非常好的一个tab选项卡”指的是在Web开发中常用的一种用户界面元素,它允许在单个容器内切换多个视图或内容区域。在VS2005(Visual Studio 2005)这个集成开发环境中,通过JavaScript实现的tab选项卡...

    Android Tab 选项卡

    在Android开发中,Tab选项卡是一种常见的用户界面设计,它允许用户通过切换不同的Tab来查看或操作不同的内容区域。在本资源"Android Tab 选项卡"中,开发者提供了一个使用`Fragment`实现的Tab切换示例,这对于我们...

    tab选项卡的两个例子

    在网页设计和开发中,"tab选项卡"是一种常见的用户界面元素,用于组织和展示大量信息。它允许用户通过点击不同的标签在多个视图或内容之间进行切换,从而提高用户体验和页面的可读性。本篇文章将深入探讨“tab选项卡...

    TAB选项卡示例介绍

    ### TAB选项卡示例介绍深度解析 在网页设计与开发领域,TAB选项卡是一种常见的交互元素,用于在有限的空间内展示更多的信息或功能模块。它不仅提升了用户体验,还优化了界面布局,使得页面更加整洁有序。本文将深入...

    jQuery实现定位滚动tab选项卡效果.zip

    在网页设计中,Tab选项卡是一种常见的用户界面元素,它能有效地组织和展示大量信息,让用户在有限的空间内浏览多个内容板块。jQuery是一款强大的JavaScript库,提供了丰富的功能和简便的API,使得实现复杂的交互效果...

    tab选项卡新闻列表切换效果代码

    在网页设计中,"tab选项卡"是一种常见的用户界面元素,用于组织和展示大量信息。Tab选项卡允许用户在不同的内容区域之间切换,而无需滚动或打开新的页面,从而提高用户体验和网站导航效率。本资源提供的是一个实现...

    4种不同风格jQuery自定义tab选项卡特效.zip

    导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。这是tab选项卡切换的源代码,由于内容较多,所以只截取了大致的结构。其实第二个盒子...

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    "圆角边框"是CSS3引入的一个特性,可以使得元素的边框呈现出柔和的曲线效果,而"TAB选项卡"则是常见的一种网页布局模式,通常用于组织和展示大量内容。"滑动门"是一种JavaScript实现的动画效果,它通过改变元素的...

    jQuery tab选项卡切换和新闻资讯列表布局代码.zip

    本资源“jQuery tab选项卡切换和新闻资讯列表布局代码”提供了使用jQuery实现的选项卡切换功能以及新闻资讯列表的布局示例,这对于前端开发者来说是一个非常实用的学习和参考材料。 选项卡切换是网页设计中常见的...

    简洁的bootstrap垂直tab选项卡

    这款“简洁的Bootstrap垂直tab选项卡”旨在提供一种更直观、节省空间的用户界面,尤其适用于内容丰富的网页。在这个项目中,开发者通过对Bootstrap原生选项卡组件进行定制,实现了垂直布局,使得用户可以在页面的一...

    android Tab选项卡

    在Android开发中,"android Tab选项卡"是一个常见的用户界面元素,用于展示多个视图或功能区域,并且允许用户在这些区域之间轻松切换。通常,Tab选项卡的设计目的是提高用户体验,使得用户能快速访问和浏览应用程序...

    html5和css3全屏响应式tab选项卡

    在这个插件中,可能还包含了如Flexbox或Grid布局来实现更灵活的容器管理和对齐方式,使得tab选项卡在不同屏幕尺寸下能够自适应调整。可能还运用了伪类(Pseudo-classes)和伪元素(Pseudo-elements)来添加特定状态...

Global site tag (gtag.js) - Google Analytics