如何用js代码写一个tab选项卡

JavaScript017

如何用js代码写一个tab选项卡,第1张

代码如下:

<html> 

<head> 

<style type="text/css"> 

padding-bottom: 0px 

margin: 0px 

padding-left: 0px 

padding-right: 0px 

font-size: 12px 

padding-top: 0px 

BODY 

padding-left: 20px 

padding-top: 20px 

.wid240 

width: 242px 

margin-bottom: 20px 

.wid180 

width: 182px 

.tab 

border-bottom: #000 1px solid 

border-left: #000 1px solid 

border-top: #000 1px solid 

border-right: #000 1px solid 

.tab UL 

zoom: 1 

clear: both 

.tab UL:after 

display: block 

height: 0px 

visibility: hidden 

clear: both 

content: "" 

.tab UL LI 

text-align: center 

line-height: 26px 

width: 60px 

display: inline 

background: #000 

float: left 

height: 26px 

color: #fff 

.tab UL LI.on 

background: #fff 

color: #000 

.tabList 

border-bottom: #000 1px solid 

border-left: #000 1px solid 

height: 150px 

border-top: #000 1px 

border-right: #000 1px solid 

.tabList .one 

padding-bottom: 10px 

padding-left: 10px 

padding-right: 10px 

display: none 

color: #ff0000 

padding-top: 10px 

.tabList .block 

display: block 

</style> 

<script type="text/javascript"> 

function setTab(name,m,n){ 

for( var i=1i<=ni++){ 

var menu = document.getElementById(name+i) 

var showDiv = document.getElementById("cont_"+name+"_"+i) 

menu.className = i==m ?"on":"" 

showDiv.style.display = i==m?"block":"none" 

</script> 

<meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> 

</head> 

<body> 

<div class="wid240"> 

<div class="tab"> 

<ul> 

<li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li> 

<li id="one2" onmouseover='setTab("one",2,4)'>one2 </li> 

<li id="one3" onmouseover='setTab("one",3,4)'>one3 </li> 

<li id="one4" onmouseover='setTab("one",4,4)'>one4 </li> 

</ul> 

</div> 

<div class="tabList"> 

<div id="cont_one_1" class="one block"> 

cont_one_1</div> 

<div id="cont_one_2" class="one"> 

cont_one_2</div> 

<div id="cont_one_3" class="one"> 

cont_one_3</div> 

<div id="cont_one_4" class="one"> 

cont_one_4</div> 

</div> 

</div> 

<div class="wid180"> 

<div class="tab"> 

<ul> 

<li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li> 

<li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li> 

<li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li> 

</ul> 

</div> 

<div class="tabList"> 

<div id="cont_tow_1" class="one block"> 

cont_tow_1</div> 

<div id="cont_tow_2" class="one"> 

cont_tow_2</div> 

<div id="cont_tow_3" class="one"> 

cont_tow_3</div> 

</div> 

</div> 

</body> 

</html>

直接复制到本地html页面运行就可以,望采纳,谢谢!

书脊上贴的标签,称为索书号,一般包括两个部分(一般分在两行)。

第一行是分类号,是表示图书内容的学科隶属代码。

第二行是区分号,用以区分本馆同一学科代码下的不同的图书。有的图书馆使用著者代码,有的图书馆使用次序号。

<div class="easyui-tabs" style="width:1100pxheight:850pxpadding:10px, 10px, 10px, 10px," id="tab" data-options="fit:true">

<div style="background:#D1EEEE" title="基本信息" id="tabControl1" style="text-align: centerborder: 0px solid" data-options="selected:true">

<div>

<div>

<script type="text/javascript">

$('#tab').tabs('add',{

title: '酒店图片',

content: '<iframe src="'+地址+'" scrolling="auto" frameborder="0" style="width:100%height:100%"></iframe>',

closable: false

})

</>