各种选项卡效果及代码（常用选项卡）

今天给各位分享各种选项卡效果及代码的知识，其中也会对常用选项卡进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何用js实现，实现选项卡切换的效果
• 2、如何实现tabs选项卡效果
• 3、基于jquery实现最简单的选项卡切换效果
• 4、js怎么实现网页选项卡切换效果
• 5、基于jquery实现的tab选项卡功能示例【附源码下载】
• 6、JS代码解释[CSS+JS选项卡效果]

如何用js实现，实现选项卡切换的效果

!doctype html

html lang="en"

head

meta charset="UTF-8"

titletab标签切换效果/title

style

*{ margin:0; padding:0;list-style: none;}

body {font:12px/1.5 Tahoma;}

#outer {width:450px;margin:150px auto;}

#tab {overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

#tab li {float:left;color:#fff;height:30px; cursor:pointer; line-height:30px;padding:0 20px;}

#tab li.current {color:#000;background:#ccc;}

#content {border:1px solid #000;border-top-width:0;}

#content ul {line-height:25px;display:none; margin:0 30px;padding:10px 0;}

/style

/head

body

!-- html代码begin --

div id="outer"

ul id="tab"

li class="current"tab标签/li

liqq在线客服代码/li

licss3/li

/ul

div id="content"

ul style="display:block;"

a href=""tab标签/a

/ul

ul

a href=""服代码/a

/ul

ul

a href=""css/a

/ul

/div

/div

!-- html代码end --

script src="jquery.min.js"/script

script

$(function(){

window.onload = function()

{

var $li = $('#tab li');

var $ul = $('#content ul');

$li.mouseover(function(){

var $this = $(this);

var $t = $this.index();

$li.removeClass();

$this.addClass('current');

$ul.css('display','none');

$ul.eq($t).css('display','block');

})

}

});

/script

/body

/html

如何实现tabs选项卡效果

前段时间写了个tabs 选项卡切换效果，今天抽空在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果了。

html 代码：

!DOCTYPE HTML

html lang="en-US"

head

meta charset="UTF-8"

titlejs-tabs/title

link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/

style type="text/css"

a{color:#a0b3d6;}

.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}

.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}

.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4{background:white;border-bottom:1px solid white;_position:relative;}

.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}

/style

/head

body

div class="tabs" id="tabs"

h2 class="tabs-nav clearfix"

a href="javascript:;"首页/a

a href="javascript:;"技术/a

a href="javascript:;"生活/a

a href="javascript:;"作品/a

/h2

p class="tabs-content"首页首页首页首页首页首页首页首页首页首页/p

p class="tabs-content"技术技术技术技术技术技术技术技术技术技术/p

p class="tabs-content"生活生活生活生活生活生活生活生活生活生活/p

p class="tabs-content"作品作品作品作品作品作品作品作品作品作品/p

/div

br/br/

div class="tabs" id="tabs2"

h2 class="tabs-nav clearfix"

a href="javascript:;"11111/a

a href="javascript:;"22222/a

a href="javascript:;"33333/a

/h2

p class="tabs-content"11111111111111111111111111111111111/p

p class="tabs-content "222222222222222222222222222222222222/p

p class="tabs-content "333333333333333333333333333333333333333/p

/div

/body

/html

script type="text/javascript" src="tabs.js"/script

script type="text/javascript"

window.onload = function(){

tabs('tabs','click',true,1000);

tabs('tabs2','mouseover');

}

/script

tabs.js 代码：

function tabs(id,trigger,autoplay,time){

var tabsWrap = document.getElementById(id);

var tabsBtn = tabsWrap.getElementsByTagName('h2').getElementsByTagName('a');

var tabsContent = getClass('tabs-content',tabsWrap);

var timer = null;

var current = 0;

show(0);

for(var i = 0,len = tabsBtn.length; i len; i++){

tabsBtn[i].index = i;

if(trigger == 'click'){

tabsBtn[i].onclick = function(){

show(this.index);

}

}else if(trigger == 'mouseover'){

tabsBtn[i].onmouseover = function(){

show(this.index);

}

}

}

if(autoplay){

autoPlay();

tabsWrap.onmouseover = function(){

clearInterval(timer);

}

tabsWrap.onmouseout = function(){

autoPlay();

}

}

function autoPlay(){

timer = setInterval(function(){

show(current);

current++;

if(current = tabsBtn.length){

current = 0;

}

},time);

}

function show(n){

current = n;

for(var i = 0,len = tabsBtn.length; i len; i++){

tabsBtn[i].className = '';

tabsContent[i].style.display = 'none';

}

tabsBtn[current].className = 'select' + (current + 1);

tabsContent[current].style.display = 'block';

}

function getClass(classname,obj){

var results = [];

var elems = obj.getElementsByTagName('*');

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

if(elems[i].className.indexOf(classname) != -1){

results[results.length] = elems[i];

}

}

return results;

}

}

基于jquery实现最简单的选项卡切换效果

这个功能在现在的网站中使用较为普遍，就是以选项卡的形式来对一些内容做了分类。，比如下面的天猫商城。

下面的源码是仿照天猫写的一个选项卡，实现起来的效果如下。

主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。

同时利用hover为其添加了鼠标滑过时的效果。

代码：

!DOCTYPE

html

html

lang="en"

xmlns=""

head

meta

charset="utf-8"

/

link

href="css/style1.css"

rel="stylesheet"

type="text/css"

/

script

src="jquery-1.3.2.min.js"/script

title/title

script

$(function

()

{

var

$div_li

=

$("div.tab_menu

ul

li");

$div_li.click(function

()

{

//定义了tan_menu对应的单击事件，也就是类别的单击事件。

$(this).addClass("selected")

.siblings().removeClass("selected");

var

index

=

$div_li.index(this);

$("div.tab_boxdiv").eq(index).show()

.siblings().hide();

}).hover(function

()

{

//定义了鼠标滑过特效

$(this).addClass("hover");

},

function

()

{

$(this).removeClass("hover");

});

});

/script

/head

body

div

class="tab"

div

class="tab_menu"

ul

li

class="selected"时事/li

li体育/li

li娱乐/li

/ul

/div

div

class="tab_box"

div时事/div

div

class="hide"体育/div

div

class="hide"娱乐/div

/div

/div

/body

/html

以上就是本文的全部内容，希望对大家熟练掌握实现选项卡切换的技巧有所帮助。

js怎么实现网页选项卡切换效果

下载相关的脚步运行库：由于采用JQuery脚本来实现网页的动态效果，因此需要在网上搜索并下载相应的JQuery运动库，下载完成后进行解压缩，将解压后的文件拷贝到网站的根目录下。

创建网页选项卡页面：新建一网页文件，命名为"index.html",利用文本编辑器打开，由于打算利用JQuery实现网页的脚本，因此需要引入对JQuery运行库的访问。“index.html”文件的重要作用是给用户呈现最基本的网页选项卡框架，其中包括三个选项卡，每一个选项卡中包括若干二级超链接，当然也可以是其它的文本内容。在文件中输入的代码。代码中包括对样式文件“MyStyle.css”和脚本文件“MyJQuery.js”的引用，对于这两个文件，我们将会在后面的讲解中进行展示。对应的网页效果。

接下来需要对该网页进入美化：在当前目录下新建一名称为"MyStyle.css"的层叠样式表文件，利用该文件实现网页的美化。当然利用CSS进行美化操作的另一目地是实现网页的内容与其表现形式的分离，这样就可以使我们专注于网页的美化，实现了更高效的分工合作理念。样式表文件的源码及对应的网页效果。

实现对选项卡切换时的脚本控制：在当前目录下创建另一文件，并命名为“MyQuery.js”。该文件的重要作用是实现选项卡的切换效果，当用户鼠标划过其中的一个菜单时，该菜单将显现高亮显示状态，同时位于该菜单下方的内容将会慢慢显示出来，并做了相应的的改变，同时其它选项卡的高亮显示状态被取消，恢复为默认状态。其源代码。

对网页制作效果进行测试：双击文件"index.html"，就会自动启动浏览器，最终的网页选项卡效果如图。当用户鼠标划过其中的一个菜单时，该菜单将显现高亮显示状态，同时位于该菜单下方的内容将会慢慢显示出来，并做了相应的的改变，同时其它选项卡的高亮显示状态被取消，恢复为默认状态。

基于jquery实现的tab选项卡功能示例【附源码下载】

本文实例讲述了基于jquery实现的tab选项卡功能。分享给大家供大家参考，具体如下：

jquery这款杀手级别的js框架，显然已成了开发界的标准js库，在开发一般web应用的时候，常常用到。今天找到一个实现jquery

tab页的插件，效果还不错，比自己用javascript和css去实现一个tab页好多了。用

tab

页美化界面，对于用户体验来说是显而易见，让各种不同类型的数据分布在不同的tab页中。很直观，也避免了很多数据现在在一个界面中，显得很臃肿，看上去就怕。这一款基于jquery

的tab

页插件名字叫:billy.carousel.

先看看效果图

看上去效果还不错吧。

下面看jquery

tab

的html页面代码吧

!DOCTYPE

html

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

meta

name="description"

content="jQuery实现的tab选项卡式图片切换效果"

/

titlejQuery实现的tab选项卡式图片切换效果/title

!--

JS

Includes

--

script

src="images/jquery.js"

type="text/javascript"/script

script

src="images/billy.carousel.jquery.min.js"

type="text/javascript"/script

!--

CSS

Includes

--

link

rel="stylesheet"

href="images/demonstration.css"

rel="external

nofollow"

type="text/css"

media="screen"

/

titletab选项测试/title

/head

body

script

type="text/javascript"

$(document).ready(

function()

{

$('#tabber').billy({

slidePause:

5000,

indicators:

$('ul#tabber_tabs'),

customIndicators:

true,

autoAnimate:

false,

noAnimation:

true

});

});

/script

div

id="container"

h3Jquery

Tab

选项卡测试/h3

p点击tab页切换/p

!--

The

Tabs

标题

--

ul

id="tabber_tabs"

lia

href="#0"

rel="external

nofollow"

Tab

One/a/li

lia

href="#1"

rel="external

nofollow"

Tab

Two/a/li

lia

href="#2"

rel="external

nofollow"

Tab

Three/a/li

lia

href="#3"

rel="external

nofollow"

Tab

Four/a/li

/ul

!--

Tabbed

内容区

--

div

id="tabber_clip"

ul

id="tabber"

liimg

src="images/desert.jpg"

width="900"

height="400"

alt="Desert"/li

li

br

/

我想有一座房子，面朝大海，春暖花开....

/li

liimg

src="images/wood.jpg"

width="900"

height="400"

alt="Wood"/li

liimg

src="images/pond.jpg"

width="900"

height="400"

alt="Pond"/li

/ul

/div

/div

/body

/html

在head中引入相关的jquery文件之后，按照上面的例子，就可以做出tab页面的样式了，非常简单了。如果需要调整样式，可以修改css.

代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:基于JQuery的6个Tab选项卡插件JQuery

Tab选项卡效果代码改进版jQuery实现TAB选项卡切换特效简单演示jQuery实现Tab选项卡切换效果简单演示jquery实现超简洁的TAB选项卡效果代码jQuery实现滚动切换的tab选项卡效果代码jQuery实现移动端Tab选项卡效果jQuery封装的tab选项卡插件分享jquery实现tab选项卡切换效果（悬停、下方横线动画位移）动感效果的TAB选项卡jquery

插件

JS代码解释[CSS+JS选项卡效果]

转载自：

script language=javascript

//一个JS自定义函数

function secBoard(n)

{

//secTable是表格的ID.也就是说那个表格元素的集合.cells是表格行或整个表格中所有单元格的集合.cells.length是这个集合的长度.

//下面这两语句的作用就是表格内所有的单元格的CSS样式名改为"SEC1"

for(i=0;isecTable.cells.length;i++)

secTable.cells[i].className="sec1";

//下面这语句的作用就是表格内被单击的单元格的样式名改为"SEC2"

secTable.cells[n].className="sec2";

//下面三句与上面换样式名的相似..作用是显示或隐藏所对应单元格的内容

for(i=0;imainTable.tBodies.length;i++)

mainTable.tBodies[i].style.display="none";

mainTable.tBodies[n].style.display="block";

}

/script

各种选项卡效果及代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于常用选项卡、各种选项卡效果及代码的信息别忘了在本站进行查找喔。