|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 求各位javascript達人幫忙!!!!!!!!!!!!
小弟想用Windows選項卡的效果在網頁中作個導航,以前在網上找了一個模型,是用表格,我把它必成了CSS定位的,現在想套用一下,把代碼加上了,但半天就是沒有效果,也看不出錯在哪兒,個人估計是語法錯誤,求各位javascript達人幫忙!!!!!!!!!!!!
模型如下:
[html]<html>
<head>
<style type=text/css>
li{
list-style:none;
}
#mainTable li table{
top:50px;
margin-top:10px;
}
#secTable li{
font-size: 12px;
color: #000000;
line-height:30px;
width:136px;
text-align:center;
float:left;
}
.sec1 {
background-color: #EEEEEE;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-center: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-center: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
<script language=javascript>
function secBoard(n)
{
var hs=mainTable.getElementsByTagName("li");
for(i=0;i<4;i++){
idName=document.getElementById(i);
if(i!=n)
idName.className="sec1";
else
idName.className="sec2";
}
for(i=0;i<hs.length;i++){
if(i!=n)
hs[i].style.display="none";
else
hs[n].style.display="block";
}
}
</script>
</head>
<body>
<ul style="position:absolute;left:100px;top:75px;width:548px;" border=0 cellspacing=0 cellpadding=0 id=secTable>
<li id=0 class=sec2 width=10% onclick="secBoard(0)">關於TBODY標記</li>
<li id=1 class=sec1 width=10% onclick="secBoard(1)">關於cells集合</li>
<li id=2 class=sec1 width=10% onclick="secBoard(2)">關於tBodies集合</li>
<li id=3 class=sec1 width=10% onclick="secBoard(3)">關於visibility屬性</li>
</ul>
<ul style="position:absolute;left:100px;top:100px;width:548px;height:240px;text-align:center" id=mainTable class=main_tab>
<li align=center style="display:block;">
<table width=500px height=220px bgcolor=red><tr><td></td></tr></table>
</li>
<li align=center style="display:none;">
<table width=500px height=220px bgcolor=blue><tr><td></td></tr></table>
</li>
<li align=center style="display:none;">
<table width=500px height=220px bgcolor=yellow><tr><td></td></tr></table>
</li>
<tr>
<li align=center style="display:none;">
<table width=500px height=220px bgcolor=black><tr><td></td></tr></table>
</li>
</table>
</body>
</html>
[/html]
我設計的導航如下:
[html]
<html>
<head>
<style>
body{
text-align:center;
font:12px/25px tahoma;
}
#nav{
font:12px/29px tahoma;
}
#nav .normal{
width:24.9%;
height:33px;
border-width:0 0 4px 4px;
border-style:solid;
border-color:#fff;
float:left;
margin-top:67px;
background-color:#eee;
}
#nav .check{
width:24.9%;
height:33px;
border-width:0 0 4px 4px;
border-style:solid;
border-color:#fff;
border-bottom-color:#ddd;
float:left;
margin-top:67px;
background-color:#ddd;
}
#item a{
width:100px;
height:25px;
background:#c91abb;
margin:0 4px 0 0;
float:left;
display:block;
text-decoration:none;
}
</style>
<script language=javascript>
function secBoard(n){
var hs=document.getElementById(item).getElementsByTagName("div");
for(i=0;i<4;i++){
idName=document.getElementById(i);
if(i!=n)
idName.className="normal";
else
idName.className="check";
}
for(i=0;i<hs.length;i++){
if(i!=n)
hs[i].style.display="none";
else
hs[n].style.display="block";
}
}
</script>
</head>
<body>
<div style="width:780px;height:125px;position:absolute;top:0px;left:0px;background-color:#888;">
<div id="logo" style="width:50%;height:100px;float:left;border-bottom:4px solid #fff;"></div>
<div id="nav" style="width:50%;height:100px;float:right;">
<div id=0 class="check" onclick="secBoard(0)">0</div>
<div id=1 class="normal" onclick="secBoard(1)">1</div>
<div id=2 class="normal" onclick="secBoard(2)">2</div>
<div id=3 class="normal" onclick="secBoard(3)">3</div>
</div>
<div id="item" style="width:100%;height:25px;background-color:#ddd;">
<div id="index" style="width:100%;height:100%;display:block;">
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</div>
<div id="xuanchuan" style="width:100%;height:100%;display:none;">
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
</div>
<div id="zuzhi" style="width:100%;height:100%;display:none;">
<a href="#">21</a>
<a href="#">22</a>
<a href="#">23</a>
<a href="#">24</a>
<a href="#">25</a>
</div>
<div id="tongzhan" style="width:100%;height:100%;display:none;">
<a href="#">31</a>
<a href="#">32</a>
<a href="#">33</a>
<a href="#">34</a>
<a href="#">35</a>
</div>
</div>
</div>
</body>
</html>
[/html]
還請各位路過的大哥大姐熱心幫忙!!!!!小弟不勝感激!!!!!!!!!!!!!!!!!!!!!!! |
var hs=document.getElementById(item).getElementsByTagName("DIV");
|
[html]
<html>
<head>
<style>
body{
text-align:center;
font:12px/25px tahoma;
}
#nav{
font:12px/29px tahoma;
}
#nav .normal{
width:24.9%;
height:33px;
border-width:0 0 4px 4px;
border-style:solid;
border-color:#fff;
float:left;
margin-top:67px;
background-color:#eee;
}
#nav .check{
width:24.9%;
height:33px;
border-width:0 0 4px 4px;
border-style:solid;
border-color:#fff;
border-bottom-color:#ddd;
float:left;
margin-top:67px;
background-color:#ddd;
}
#item a{
width:100px;
height:25px;
background:#c91abb;
margin:0 4px 0 0;
float:left;
display:block;
text-decoration:none;
}
</style>
<script language=javascript>
function secBoard(n){
var hs=cao.getElementsByTagName("div");
for(i=0;i<4;i++){
idName=document.getElementById(i);
if(i!=n)
idName.className="normal";
else
idName.className="check";
}
for(i=0;i<hs.length;i++){
if(i!=n)
hs[i].style.display="none";
else
hs[n].style.display="block";
}
}
</script>
</head>
<body>
<div style="width:780px;height:125px;position:absolute;top:0px;left:0px;background-color:#888;">
<div id="logo" style="width:50%;height:100px;float:left;border-bottom:4px solid #fff;"></div>
<div id="nav" style="width:50%;height:100px;float:right;">
<div id=0 class="check" onclick="secBoard(0)">0</div>
<div id=1 class="normal" onclick="secBoard(1)">1</div>
<div id=2 class="normal" onclick="secBoard(2)">2</div>
<div id=3 class="normal" onclick="secBoard(3)">3</div>
</div>
<div id="cao" style="width:100%;height:25px;background-color:#ddd;">
<div id="index" style="width:100%;height:100%;display:block;">
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</div>
<div id="xuanchuan" style="width:100%;height:100%;display:none;">
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
</div>
<div id="zuzhi" style="width:100%;height:100%;display:none;">
<a href="#">21</a>
<a href="#">22</a>
<a href="#">23</a>
<a href="#">24</a>
<a href="#">25</a>
</div>
<div id="tongzhan" style="width:100%;height:100%;display:none;">
<a href="#">31</a>
<a href="#">32</a>
<a href="#">33</a>
<a href="#">34</a>
<a href="#">35</a>
</div>
</div>
</div>
</body>
</html>
[/html] |
| 真是萬分感謝,cao888,你是我的偶像,多謝...... |
| 不過還有個疑問,為什麼我用item作id就不行呢? |
可以的,是你寫錯了
[html]<html>
<head>
<style>
body{
text-align:center;
font:12px/25px tahoma;
}
#nav{
font:12px/29px tahoma;
}
#nav .normal{
width:24.9%;
height:33px;
border-width:0 0 4px 4px;
border-style:solid;
border-color:#fff;
float:left;
margin-top:67px;
background-color:#eee;
}
#nav .check{
width:24.9%;
height:33px;
border-width:0 0 4px 4px;
border-style:solid;
border-color:#fff;
border-bottom-color:#ddd;
float:left;
margin-top:67px;
background-color:#ddd;
}
#item a{
width:100px;
height:25px;
background:#c91abb;
margin:0 4px 0 0;
float:left;
display:block;
text-decoration:none;
}
</style>
<script language=javascript>
function secBoard(n){
var hs=document.getElementById('qq').getElementsByTagName("div");
for(i=0;i<4;i++){
idName=document.getElementById(i);
if(i!=n)
idName.className="normal";
else
idName.className="check";
}
for(i=0;i<hs.length;i++){
if(i!=n)
hs[i].style.display="none";
else
hs[n].style.display="block";
}
}
</script>
</head>
<body>
<div style="width:780px;height:125px;position:absolute;top:0px;left:0px;background-color:#888;">
<div id="logo" style="width:50%;height:100px;float:left;border-bottom:4px solid #fff;"></div>
<div id="nav" style="width:50%;height:100px;float:right;">
<div id=0 class="check" onclick="secBoard(0)">0</div>
<div id=1 class="normal" onclick="secBoard(1)">1</div>
<div id=2 class="normal" onclick="secBoard(2)">2</div>
<div id=3 class="normal" onclick="secBoard(3)">3</div>
</div>
<div id="qq" style="width:100%;height:25px;background-color:#ddd;">
<div id="index" style="width:100%;height:100%;display:block;">
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
</div>
<div id="xuanchuan" style="width:100%;height:100%;display:none;">
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
</div>
<div id="zuzhi" style="width:100%;height:100%;display:none;">
<a href="#">21</a>
<a href="#">22</a>
<a href="#">23</a>
<a href="#">24</a>
<a href="#">25</a>
</div>
<div id="tongzhan" style="width:100%;height:100%;display:none;">
<a href="#">31</a>
<a href="#">32</a>
<a href="#">33</a>
<a href="#">34</a>
<a href="#">35</a>
</div>
</div>
</div>
</body>
</html>
[/html] |
我一直有個疑問,就像這樣:
var hs=cao.getElementsByTagName("div");
和var hs=document.getElementById('qq').getElementsByTagName("div");
是不是對於id,可以在javascript中直接引用呢?個人感覺好像可以,但又沒確切自信,每次用的時候都覺得很苦惱.......
|
直接引用是什麼意思,js通過id識別,但要注意語法,寫法~
實例,js控制div的CSS
[html]
<style type="text/css">
*{
margin:0;
padding:0;
}
#aq{
background: url(#);
height:0px;
}
</style>
<script>
function changeIt() {
var myobj=document.getElementById("aq");
myobj.style.background="url(http://www.blueidea.com/img/common/logo.gif)";
myobj.style.height=document.body.clientHeight;
}
</script>
</head>
<body>
<div id="aq" style=" background-color:#CCCC00">
<input type="submit" name="Submit" value="點這裡看看效果" onClick="changeIt()">
</div>
</body>
</html>[/html] |
| 再次感謝...... |
|
