欢迎指点！
效果图：
有两种办法实现：
原理一：多个html文件之间的跳转。（多个html文件）
原理二：显示隐藏。（一个html文件）
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
原理一：多个html文件之间的跳转。
CSS样式都是一样的：
body{
margin: 0;padding: 0;width: 100%;height: 100%;
}
ul{
margin: 0;
padding: 0;
padding-top: 7px;
width: 700px;
height: 53px;
border-bottom: 1px solid #ddd;
}
li{
list-style: none;
}
#wrap{
width: 82%;
height: 100%;
padding: 0 100px;
}
.title{
}
.title li{
float: left;
border: 0;
width: 145px;
height: 42px;
margin-left: 10px;
outline: 0;
vertical-align: baseline;
background: #fff;
border: 1px solid #ddd;
}
.title li a{
width: 100%;
font-size: 14px;
display: inline-block;
text-align: center;
line-height: 42px;
text-decoration: none;
color: #999;
}
.title li.active{
background: #f39803;
color: #fff;
border-color: #f29803
}
.title li.active a{
color: #fff;
}
.title li.active i{
width: 15px;
height: 8px;
background: url(cent-1.png) no-repeat;
display: block;
margin: 0 auto;
}
.con{
padding: 10px;
}
以下是tabOne.html的代码，
tabTwo.html，tabThree.html，tabFour.html的代码同理。
<div id="wrap">
<div class="title">
<ul>
<li class="active"><a href="tabOne.html">产品介绍</a><i></i></li>
<li><a href="tabTwo.html">产品功能</a><i></i></li>
<li><a href="tabThree.html">产品价格</a><i></i></li>
<li><a href="tabFour.html">更多服务</a><i></i></li>
</ul>
</div>
<div class="con">
内容内容内容内容内容内容
</div>
</div>
原理二：显示隐藏。
<body>
<div id="wrap">
<div class="title">
<ul>
<li class="active">产品介绍<i></i></li>
<li>产品功能<i></i></li>
<li>产品价格<i></i></li>
<li>更多服务<i></i></li>
</ul>
</div>
<div class="con">
内容内容内容内容内容内容1
</div>
<div class="con">
内容内容内容内容内容内容2
</div>
<div class="con">
内容内容内容内容内容内容3
</div>
<div class="con">
内容内容内容内容内容内容4
</div>
</div>
</body>
body{
margin: 0;padding: 0;width: 100%;height: 100%;
}
ul{
margin: 0;
padding: 7px 0 0;
width: 700px;
height: 53px;
border-bottom: 1px solid #ddd;
}
li{
list-style: none;
}
#wrap{
width: 82%;
height: 100%;
padding: 0 100px;
}
.title li{
float: left;
border: 0;
width: 145px;
height: 42px;
margin-left: 10px;
outline: 0;
background: #fff;
border: 1px solid #ddd;
text-align: center;
font-size: 14px;
line-height: 42px;
}
.title li.active{
background: #f39803;
color: #fff;
border-color: #f29803
}
.title li.active i{
width: 15px;
height: 8px;
background: url(cent-1.png) no-repeat;
display: block;
margin: 0 auto;
}
.con{
padding: 10px;
display: none;
}
var oLi = document.querySelectorAll('li');
var oCon = document.querySelectorAll('.con');
var index;
window.onload = onloadCon();
function onloadCon(){
for(var i =0;i<oLi.length;i++){
oCon[i].style.display = 'none'
if(hasClass(oLi[i],'active')==true){
index = i;
oCon[i].style.display = 'block';
}
}
}
oLi[0].onclick = function(){
addClass(oLi[0],'active');
removeClass(oLi[1],'active');
removeClass(oLi[2],'active');
removeClass(oLi[3],'active');
onloadCon()
}
oLi[1].onclick = function(){
addClass(oLi[1],'active');
removeClass(oLi[0],'active');
removeClass(oLi[2],'active');
removeClass(oLi[3],'active');
onloadCon()
}
oLi[2].onclick = function(){
addClass(oLi[2],'active');
removeClass(oLi[0],'active');
removeClass(oLi[1],'active');
removeClass(oLi[3],'active');
onloadCon()
}
oLi[3].onclick = function(){
addClass(oLi[3],'active');
removeClass(oLi[0],'active');
removeClass(oLi[1],'active');
removeClass(oLi[2],'active');
onloadCon()
}
function hasClass(elem, cls){
cls = cls || '';
if(cls.replace(/\s/g, '').length == 0) return false;
return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
}
function addClass(elem, cls){
if(!hasClass(elem, cls)){
elem.className += ' ' + cls;
}
}
function removeClass(elem, cls){
if(hasClass(elem, cls)){
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
while(newClass.indexOf(' ' + cls + ' ') >= 0){
newClass = newClass.replace(' ' + cls + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
}
- 大小: 2.1 KB
分享到：
相关推荐
本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能，提供多样的皮肤选择，使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素，用于组织和展示大量信息。它通过将相关...
标题“选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡”表明我们要讨论的是LabVIEW中的选项卡切换技术，这通常涉及到如何在LabVIEW程序中实现不同界面或工作空间之间的平滑过渡。 描述中提到...
修正了原来《http://download.csdn.net/download/guo8ke/1512418》的bug，本选项卡是自行编写的选项卡代码， 可以动态生成选显卡，关闭选项卡， 每个选项卡 对应也可页面。点击选项卡之后，显示对应的页面内容。当...
"选项卡应用"是指在GUI界面上使用选项卡控件，让用户通过不同的选项卡来访问和操作不同的功能区域，使得界面更加清晰、操作更加方便。本篇将深入探讨如何在MATLAB中实现GUI的选项卡应用。 首先，`tabpanelcopydemo....
在IT行业中，网页设计是至关重要的一环，而选项卡样式则是网页设计中常见的交互元素，它可以帮助用户在有限的空间内浏览多个相关但不同时显示的内容。"好看的选项卡样式"这个话题聚焦于如何通过CSS（层叠样式表）来...
在LabVIEW编程环境中，选项卡（Tab Control）是一种常见的用户界面元素，用于组织和展示多个相关的子VI或数据显示区域。本文将深入探讨如何在LabVIEW中禁用和启用选项卡，以及如何通过属性节点来操作这些功能，这对...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量内容，同时保持页面整洁。jQuery 是一个流行的 JavaScript 库，它提供了一系列便利的 API 和方法，使得实现动态切换选项卡功能变得非常...
在Android应用开发中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示多个相关的视图或内容区域。在本“android选项卡demo”中，开发者已经简单实现了选项卡的切换、颜色设置等基本功能。这个Demo主要涉及...
在网页设计中，"DIV选项卡样式下拉"是一种常见的交互设计模式，它允许用户在一个有限的空间内切换多个内容区域，提高用户体验。本技术主要涉及HTML、CSS（层叠样式表）和JavaScript（脚本语言）的应用，实现下拉条的...
在Vue.js中实现选项卡及选项卡切换效果是常见的需求，尤其在构建用户界面时。Vue.js是一个轻量级的JavaScript框架，它提供了强大的数据绑定和组件化特性，使得实现这种交互效果变得简单且高效。这里我们将探讨如何...
在网页设计中，选项卡是一种常见的用户界面元素，它允许用户在有限的空间内查看和交互多个相关但独立的内容区域。这种设计模式提高了用户体验，因为它减少了页面的混乱，使得信息更易于管理和导航。"web各种样式网页...
在网页设计中，选项卡（Tab）组件是一个常见的交互元素，它允许用户在不同的内容区域之间切换，而无需刷新整个页面。在这个主题中，我们将深入探讨如何使用 HTML 和 CSS 实现一个简洁的选项卡功能。 首先，HTML ...
"TAB选项卡后台菜单效果"是一个专为后台管理系统设计的功能，它旨在提供高效、直观且易于导航的操作界面。在这个主题下，我们将深入探讨选项卡在后台菜单中的应用、实现方式以及它们对用户体验的影响。 选项卡是一...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量信息。jQuery Tab 插件就是一种轻量级的解决方案，能够帮助开发者轻松实现多种交互功能，如鼠标滑过、点击切换、自动切换以及数据回调。本...
在本文中，我们将深入探讨如何使用jQuery和Bootstrap框架来实现自定义的添加和删除选项卡功能。Bootstrap是一款流行的前端开发工具，它提供了丰富的组件和样式，使得构建响应式和交互式的用户界面变得简单。而jQuery...
在LabVIEW中，"选项卡"是一种常用的界面元素，它允许用户在不同的功能或数据集之间切换，类似于传统应用程序中的“窗口”或“标签页”。 在标题中提到的“labview通过程序动态修改选项卡名称”，这是一个高级的...
在Android应用开发中，选项卡（Tab）是一种常见的界面元素，用于展示多个相互关联的页面或内容区域。本文将深入探讨如何使用View组件在Android中实现选项卡功能，结合具体的项目实践分享相关知识。 首先，我们需要...
在编程和用户界面设计中，选项卡控件是一种常见的组件，用于组织和展示大量信息。在LabVIEW（Laboratory Virtual Instrument Engineering Workbench）环境中，它是一个功能强大的工具，允许用户在一个窗口内切换不同...
在IT行业中，框架选项卡是一种常见的用户界面设计模式，它被广泛应用于网页和应用程序中，以帮助用户在多个视图或内容之间进行切换，而无需不断地打开和关闭新窗口。框架选项卡允许用户在一个单一的界面空间内组织和...