选项卡

转载

mb5ff5909699060 2007-03-27 15:31:00

文章标签 javascript html ide 导航菜单 xml 文章分类 代码人生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />

<style>

dl {
  position:absolute;
  width:270px;
  height:170px;
  border:10px solid #eee;
  }
dd {
  margin:0;
  width:270px;
  height:170px;
  overflow:hidden;
  }
dt {
  position:absolute;
  right:1px;
  }

ul {
  margin:0;
  padding:0;
  width:260px;
  height:170px;
  list-style:none;
  background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;
  border:1px solid #ccc
  }
#b {
  background-position:75% center
  }
#c {
  background-position:75% 86%
  }
li {
  width:255px;
  height:27px;
  font:12px/27px "宋体",sans-serif;
  white-space:nowrap;
  overflow:hidden;
  }
dt a {
  display:block;
  margin:1px;
  width:70px;
  height:56px;
  text-align:center;
  font:700 12px/55px "宋体",sans-serif;
  color:#fff;
  text-decoration:none;
  background:#666;
  }
dt a:hover {
  background:orange
  }
</style>
<head/>
<body>
<dl>
<dt><a href="#a" title="">一个好孩子</a><a href="#b" title="">科比入党了</a><a href="#c" title="">失忆的猪猪</a></dt>
<dd>



<ul id="a">
  <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
  <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
  <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
  <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
  <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
  <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
</ul>

<ul id="b">
  <li><marquee behavior="alternate">·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></marquee></li>
  <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
  <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
  <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
  <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
  <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
</ul>

<ul id="c">
  <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
  <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
  <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
  <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
  <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
  <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
</ul>
</dd>
</dl>
</body>
</html>
  提示：您可以先修改部分代码再运行


<script>
//   ##############  SIMPLE  BROWSER SNIFFER
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {navigator.family = "gecko"}
if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family  = 'opera';}
toplevel="4";

function riseup (box) {
toplevel++;
if (navigator.family == "ie4")
  {document.all[box].style.zIndex = toplevel;}
if (navigator.family == "opera" || navigator.family == "gecko")
  {document.getElementById(box).style.zIndex = toplevel;}
}
</script>
<div id="box1"  style="position:absolute; background-color:#FF0000; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:4">
Howdy, this could be a neat little Tab style nav feature.
</div>

<div id="box2"  style="position:absolute; background-color:#FF5555; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:3">
<a href="http://javascript.internet.com">JSS</a><br>
<a href="http://www.javascripts.com">JavaScripts</a><br>
<a href="http://www.javascript.com">JavaScript</a><br>
<a href="http://webdevelopersjournal.com">WDJ</a><br>
<a href="http://www.jars.com">Jars(Java)</a><br>
</div>

<div id="box3"  style="position:absolute; background-color:#FF9999; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:2">
<a href=#><img src=http://javascript.internet.com/navigation/apple_logo.gif border=0></a><br>
Third palette now with an image link. <b>This might</b> be cool.
</div>

<div id="box4"  style="position:absolute; background-color:#FFBBBB; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:1">
Forth palette blah blah blah yada yada yada adfadf adf adf.
</div>

<div id="box5"  style="position:absolute; background-color:#FFDDDD; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:1">
Fifth palette, how many can you have? <br><br> unlimited.
</div>

<div id="tab1"  onclick="javascript:riseup('box1');" style="cursor:hand; position:absolute; background-color:#FF0000; visibility:show; left:110px;  top:400px; width:40; height:20; z-index:3">
<b>tab1</b>
</div>
<div id="tab2"  onclick="javascript:riseup('box2');" style="cursor:hand; position:absolute; background-color:#FF5555; visibility:show; left:110px;  top:425px; width:40; height:20; z-index:3">
<b>tab2</b>
</div>
<div id="tab3"  onclick="javascript:riseup('box3');" style="cursor:hand; position:absolute; background-color:#FF9999; visibility:show; left:110px;  top:450px; width:40; height:20; z-index:3">
<b>tab3</b>
</div>
<div id="tab4"  onclick="javascript:riseup('box4');" style="cursor:hand; position:absolute; background-color:#FFBBBB; visibility:show; left:110px;  top:475px; width:40; height:20; z-index:3">
<b>tab4</b>
</div>
<div id="tab5"  onclick="javascript:riseup('box5');" style="cursor:hand; position:absolute; background-color:#FFDDDD; visibility:show; left:110px;  top:500px;width:40; height:20; z-index:3">
<b>tab5</b>
</div>

<!--  THIS TABLE IS USED TO BLOCK THE AREA WHERE THE TABULAR NAV IS PLACED -->


<script>
//  #################  THIS FIXES GECKO DIV PLACEMENT
if (navigator.family == "gecko"){
for (x=1;x<6;x++) 
  {document.getElementById("tab"+x).style.left = 120; }
}
</script>