js选项卡功能实现（js写一个选项卡）

本文目录

• js写一个选项卡
• javascript如何实现浏览器选项卡的切换
• js实现同一页面中，选择不同选项卡，选项卡背景改变，相对应的层显示，刷新不改变
• 如何用js实现，实现选项卡切换的效果
• 怎么样用js实现选项卡切换

js写一个选项卡

第一步，当然是先写html代码和css样式

《!DOCTYPE html》
《html》
《head》
《meta charset=“gb2312“ /》
《title》无标题文档《/title》
《style》
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
《/style》
《/head》
《body》
《div class=“wrap“》
《ul id=“tab_t“》
《li class=“act“》选择1《/li》
《li》选择2《/li》
《li》选择3《/li》
《li》选择4《/li》
《/ul》
《div id=“tab_c“》
《div》内容1《/div》
《div class=“hide“》内容2《/div》
《div class=“hide“》内容3《/div》
《div class=“hide“》内容4《/div》
《/div》
《/div》  
《/body》
《/html》

第二步，实现简单的切换效果
要点1：abc.document.getElementsByTagName(“li“)：取得abc下面的所有标签为li的元素，返回的是一个元素集合，有数组的一些属性。
要点2：循环，先循环给li加上onclick事件，再onlink事件点击的时候，再循环让所有选项卡的act样式去掉，所有的内容隐藏。然后让所点击的选项及对应内容显示。
要点3：tab_t_li[i].index = i; 在循环时，给选项卡加一个额外的属性并赋值，以做选项卡和内容的对应。

《!DOCTYPE html》
《html》
《head》
《meta charset=“gb2312“ /》
《title》无标题文档《/title》
《style》
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
《/style》
《script》
window.onload = function(){
var tab_t = document.getElementById(“tab_t“);
var tab_t_li = tab_t.getElementsByTagName(“li“);
var tab_c = document.getElementById(“tab_c“);
var tab_c_li = tab_c.getElementsByTagName(“div“);
var len = tab_t_li.length;
var i=0;
for(i=0; i《len; i++){
tab_t_li[i].index = i;
tab_t_li[i].onclick = function(){
for(i=0; i《len; i++){
tab_t_li[i].className = ’’;
tab_c_li[i].className = ’hide’;
}
tab_t_li[this.index].className = ’act’;
tab_c_li[this.index].className = ’’;
}
}
}
《/script》
《/head》
《body》
《div class=“wrap“》
《ul id=“tab_t“》
《li class=“act“》选择1《/li》
《li》选择2《/li》
《li》选择3《/li》
《li》选择4《/li》
《/ul》
《div id=“tab_c“》
《div》内容1《/div》
《div class=“hide“》内容2《/div》
《div class=“hide“》内容3《/div》
《div class=“hide“》内容4《/div》
《/div》
《/div》  
《/body》
《/html》

第三步，写成函数。上面的写法只能一个页面用一个选项卡，如果再加一个的话，就需要复制一份，再改很多变量名。
要点：tab_t_li[i][evt] 因为传值的时候是字符串，如果直接写的话就是tab_t_li[i].“onclick“这样话是执行不了的，tab_t_li[“onclick“]这样执行没问题。
好了，现在一个页面上就可以有多个切换了，只需要调用函数的时候，写上相应的id名和标签名，事件名称就可以了

《!DOCTYPE html》
《html》
《head》
《meta charset=“gb2312“ /》
《title》无标题文档《/title》
《style》
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
《/style》
《script》
window.onload = function(){
tab(“tab_t“,“li“,“tab_c“,“div“,“onmouseover“)
function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
var len = tab_t_li.length;
var i=0;
for(i=0; i《len; i++){
tab_t_li[i].index = i;
tab_t_li[i][evt] = function(){
for(i=0; i《len; i++){
tab_t_li[i].className = ’’;
tab_c_li[i].className = ’hide’;
}
tab_t_li[this.index].className = ’act’;
tab_c_li[this.index].className = ’’;
}
}
}
}
《/script》
《/head》
《body》
《div class=“wrap“》
《ul id=“tab_t“》
《li class=“act“》选择1《/li》
《li》选择2《/li》
《li》选择3《/li》
《li》选择4《/li》
《/ul》
《div id=“tab_c“》
《div》内容1《/div》
《div class=“hide“》内容2《/div》
《div class=“hide“》内容3《/div》
《div class=“hide“》内容4《/div》
《/div》
《/div》  
《/body》
《/html》

javascript如何实现浏览器选项卡的切换

首先js是不大可能控制选项卡的，再说每种浏览器也都有不一样的选项卡模式，你通过api去实现不太可能。
你可以转换思路，不要用真正的选项卡，而是自己写一个类似于选项卡的页面，可以点击切换页面等等。点击切换选项卡或提交按钮时ajax加载你想要的内容就可以了。

js实现同一页面中，选择不同选项卡，选项卡背景改变，相对应的层显示，刷新不改变

《!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》无标题文档《/title》
《SCRIPT LANGUAGE=“JavaScript“》
《!--
function getElementsByClass(object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = ; i 《 n; i++) {
if (o[i].className == className) ret.push(o[i]);
}
if (ret.length == 1) ret = ret;
return ret;
}
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ “=“ +escape(value)+
((expiredays==null) ? ““ : “;expires=“+exdate.toGMTString())
}
function getCookie(c_name){
if (document.cookie.length》0)
{
c_start=document.cookie.indexOf(c_name + “=“)
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(“;“,c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ““
}
window.onload=function (){

var a=getElementsByClass(document,’a’,’t’)
var divchange=document.getElementById(’divchange’);;
var color=[’333’,’666’,’999’,’bbb’,’ddd’,’eee’];
if (getCookie(’color’)!=’’){
divchange.style.backgroundColor=getCookie(’color’);
}
for (var i=0;i《a.length ; i++)
{
a[i].onclick=function (n){
return function (){
divchange.style.backgroundColor=’#’+color[n];
setCookie(’color’,’#’+color[n]);

}
}(i)
}

}
//--》
《/SCRIPT》
《style》
.t{
padding:0 10px 5px;
}
#w{
background:#f9f9f9;

}
#wp{
width:368px;
height:394px;
border:3px solid #222222;
}
《/style》
《/head》
《div id=“wp“》
《p id=“w“》《a target=“_self“ href=“javascript://“ class=’t’》11111《/a》《a target=“_self“ href=“javascript://“ class=’t’》22222《/a》《a target=“_self“ href=“javascript://“ class=’t’》33333《/a》《a target=“_self“ href=“javascript://“ class=’t’》44444《/a》《a target=“_self“ href=“javascript://“ class=’t’》55555《/a》《a target=“_self“ href=“javascript://“ class=’t’》66666《/a》《/p》
《div id=“divchange“ style=“height:344px ;background:#333“ 》
《div》
《/div》

《body》
《/body》
《/html》

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

《!doctype html》
《html lang=“en“》
《head》
《meta charset=“UTF-8“》
《title》tab标签切换效果《/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》
《li》qq在线客服代码《/li》
《li》css3《/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》

怎么样用js实现选项卡切换

《!--标签--》
《div class=“tab“》
《a href=“#tab1“》标签1《/a》
《a href=“#tab2“》标签2《/a》
《div》
《!--标签对应的内容--》
《div class=“content“ style=“width:200px;height:150px;overflow:hidden;“》
《div id=“tab1“ style=“width:100%;height:100%;“》

标签1的表单放这里

《/div》
《div id=“tab2“ style=“width:100%;height:100%;“》

标签2的表单放这里
《/div》
《/div》