大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这是我自己用jquery写的选项卡切换效果,基本上所有的选项卡切换效果的原理都是一样的,无非就是css样式不同,
按需定制可以根据自己的需求进行定制,网站制作、网站设计构思过程中功能建设理应排到主要部位公司网站制作、网站设计的运用实际效果公司网站制作网站建立与制做的实际意义
控制table的样式可以这么写:
.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
这样都分别引入到table 和 td标签控制样式了。
效果如下:
可以用结对布局来做..
#a {
position: absolute;
top: 100px
right: 200px
width: 300px;
}
这个就是把 id为a的元素块 设置到到浏览器的一个绝对位置 不管那个位置有什么 这个元素都会盖在上边
CSS里用一个样式把表格里所有文字都放中间,首先需要理解父级元素的概念,要让所有的表格文字都居中,那么CSS的文字居中属性,自然就要给table,然后通过text-align:center这个属性,就能够所有的文字居中,请看代码:
html
head
style
table{ //通过class来设置
width:300px;
height:200px;
text-align:center;
}
/style
/head
body
table
tr
td我是测试文字/td
/tr
/table
/body
/html
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE New Document /TITLE
META NAME="Generator" CONTENT="EditPlus"
META NAME="js轮换选项卡样式" CONTENT=""
META NAME="js轮换选项卡样式" CONTENT=""
META NAME="js轮换选项卡样式" CONTENT=""
META http-equiv="Content-Type" content="text/html; charset=utf-8" /
/HEAD
BODY
style
#fodsx {}
#fodsx td.sx0{background:url() right no-repeat;}
#fodsx td.sx1{background:url() right no-repeat;}
#fodsx td.sx2{background:url() right no-repeat;}
#fodsx #Fod_listx p{margin:0;padding:0;width:191px;float:left;text-align:center;padding-top:6px;line-height:14px;color:#fff;font-weight:bold;font-size:12px;}
#fodsx #Fod_listx div.x{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx #Fod_listx .sx{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx ul,li{list-style-type:none;margin:0;padding:0;}
.dis{display:block}
.undis{display:none;}
.style1 {color: #444}
/style
table width="455" border="0" align="center" cellpadding="0" cellspacing="0" background="" id="fodsx" style="background-position:leftstyle
#fodsx {}
#fodsx td.sx0{background:url() right no-repeat;}
#fodsx td.sx1{background:url() right no-repeat;}
#fodsx td.sx2{background:url() right no-repeat;}
#fodsx #Fod_listx p{margin:0;padding:0;width:191px;float:left;text-align:center;padding-top:6px;line-height:14px;color:#fff;font-weight:bold;font-size:12px;}
#fodsx #Fod_listx div.x{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx #Fod_listx .sx{font-size:12px;color:#e62c71;text-align:center;width:88px;height:18px;padding-top:4px;line-height:16px;float:left;cursor:pointer;}
#fodsx ul,li{list-style-type:none;margin:0;padding:0;}
.dis{disop; background-repeat:no-repeat;margin-bottom:4px;"
tr
td height="22" valign="bottom" class="sx0" id="Fod_listx"p
script language="JavaScript"
!---
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;ithis.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray(" 星期日"," 星期一"," 星期二"," 星期三"," 星期四"," 星期五"," 星期六"); document.write(today.getYear(),"年","",today.getMonth()+1,"月",today.getDate(),"日",d[today.getDay()+1]); //--
/script
/p
div class="sx" onmouseover="fodx(this)"美 体/div
div class="x" onmouseover="fodx(this)"情 感/div
div class="x" onmouseover="fodx(this)"美 发/div/td
/tr
tr
td height="89" align="center" valign="top" background=""ul class="dis"
litable width="400" border="0" cellspacing="0" cellpadding="0"
tr
td height="36" align="center" valign="bottom"a href="" target="_blank"img src="" width="386" height="30" border="0" //a/td
/tr
tr
td height="48" valign="bottom"table width="400" border="0" cellspacing="0" cellpadding="0"
tr align="left"
td height="44" class="peach1nl font14px" span class="style1"“金猪”年马上就要过去了,那些猪年生子的女星怎么样了?快来评出你心中最闪亮的明星妈妈!/span
a href="" target="_blank" class="peach1nl font14px"[详细]/a/td
/tr
/table
/td
/tr
/table
/li
/ul
ul class="undis"
li table width="400" border="0" cellspacing="0" cellpadding="0"
tr
td height="36" align="center" valign="bottom"a href="" target="_blank"img src="" width="386" height="30" border="0" //a/td
/tr
tr
td height="48" valign="bottom"table width="400" border="0" cellspacing="0" cellpadding="0"
tr align="left"
td height="44" class="peach1nl font14px" span class="style1"在一次激情过后,刚拿出了一部相机,对着没有来得及穿上衣服的我就拍,我极力的反抗,可是来不及了……/span
a href="" target="_blank" class="peach1nl font14px"[详细]/a/td
/tr
/table
/td
/tr
/table
/li
/ul
ul class="undis"
litable width="400" border="0" cellspacing="0" cellpadding="0"
tr
td height="36" align="center" valign="bottom"a href="" target="_blank"img src="" width="386" height="30" border="0" //a/td
/tr
tr
td height="48" valign="bottom"table width="400" border="0" cellspacing="0" cellpadding="0"
tr align="left"
td height="44" class="peach1nl font14px" span class="style1"看看我们的盘点性感熟女萧蔷最美+最丑发型,萧美人犯过的错,大家可要小心别重蹈覆辙……/span
a href="" target="_blank" class="peach1nl font14px"[详细]/a
/td
/tr
/table
/td
/tr
/table/li
/ul/td
/tr
tr
td height="4" background=""/td
/tr
/table
script language="javascript"
function fodx(obj)
{
//var p = document.getElementById("Fod_list").getElementsByTagName("div");
var pxN = document.getElementById("Fod_listx");
var px = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
var px1 = obj.parentNode.getElementsByTagName("div");
var tx = px.getElementsByTagName("tr")[1].getElementsByTagName("ul");
var n = px1.length;
for(i=0;in;i++)
{
if(px1[i] == obj)
{
pxN.className = "sx" + i;
px1[i].className = "sx";
tx[i].className = "dis";
}
else
{
px1[i].className = "x";
tx[i].className = "undis";
}
}
}
/script
/BODY
/HTML
新建个HTML,复制进去看看效果
任何页面都可以重用
怎么用?打开Dreamweaver,新建一个HTML页面,然后切换到代码,把这些完全复制覆盖掉原来的,然后F12键预览。
中间的style到/style都是css样式,可以自行修改
下面整个Table里的就是主要tab选项卡代码
下面分析一下你给的那个tab选项卡怎么重用:
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;itabNumber;i++){
//document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
//document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
function etabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;itabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
这是主要JS代码
复制到你要重用的页面,不需要任何改动
重要的是这个TABLE,在不同页面改变的时候是要有“规则”的。
每个 tab选项卡上
比如:li id="tab1_btn_1" onmouseover="etabit(this)"google/li
都要加上onmouseover="etabit(this)"来触发JS
对应的tab选项卡的内容上
比如:div id="tab1_div_1" style="display:none;" 22222 /div
都要与以上的那个li的id值对应
如:
id="tab1_btn_1" (li中)
id="tab1_div_1" (div中)
id中的数字要对应,0、1、2、3、4等(是指最后的那个_1,前面的tab1忽略)
英文不需要改动
这样就说明这个tab选项卡标题是对应这个tab选项卡的内容的。
有几个选项卡就加几对li(tab卡标题)和div(tab卡内容)
1)tab2是设置页面的菜单,就是这一句:
基本选项 | 选择模板 | 自定义模板 | 高级设置 | 访问统计 | 宠物设置
2)tab是非设置页面的菜单,就是这一句:
主页|博客|相册|个人档案|好友设置