DIV+CSS+JS:Tab风格导航

goldentime 发表于 2008-3-4 15:33:00

<style>

  *{font-size:12px}

  #info {width:480px;}

  #info ul{margin:0;padding:0;width:480px;list-style:none;color:#2F5FA1;}

  #info li{float:left;background:#F4FBFF;border-right:1px solid #FFF;padding:3px 8px 3px 8px;cursor: pointer}

  #info .tag-selected{background:#D0E9F7;padding:0;margin:0;padding:3px 8px 3px 8px;}

  #info .content{border:1px solid #A6CBE7;padding:5px 3px 5px 3px;background-color:#FDFDFD;}

  #info .cleard{clear:both;}

</style>

<script>

  function wa666tag(tag){

 for(i=1; i <6; i++){

  if (i==tag) {

  document.getElementById("tag"+i).className="tag-selected";

  document.getElementById("info"+i).style.display="block";

  }else{

  document.getElementById("tag"+i).className="";

  document.getElementById("info"+i).style.display="none";

  }

 }

 }

</script>

<div id="info">

  <ul>

  <li class="tag" id="tag1" onmousemove="wa666tag('1');">热门活动</li>

  <li class="tag" id="tag2" onmousemove="wa666tag('2');">最新功能</li>

  <li class="tag-selected" id="tag3" onmousemove="wa666tag('3');">服务承诺</li>

  <li class="tag" id="tag4" onmousemove="wa666tag('4');">最新成功故事</li>

  <li class="tag" id="tag5" onmousemove="wa666tag('5');">热贴推荐</li>

  <div class="cleard"></div>

  </ul>

  <div class="content" id="info1" style="display: none;">

  <a href="http://www.wa666.cn" target="blank">热门活动</a></div>

  <div class="content" id="info2" style="display: none;">

  <a href="http://www.wa666.cn" target="blank">最新功能</a></div>

  <div class="content" id="info3">

  <a href="http://www.wa666.cn" target="blank">服务承诺</a></div>

  <div class="content" id="info4" style="display: none;">

  <a href="http://www.wa666.cn" target="blank">最新成功故事</a></div>

  <div class="content" id="info5" style="display: none;">

  <a href="http://www.wa666.cn" target="blank">热贴推荐</a></div>

</div>

http://www.tot.name/show/12/24/20070904114459.htm


发表评论:

    昵称:
    密码: (游客无须输入密码)
    主页:
    标题:


日  历

栏目分类

最新文章

最新回复

最新留言

用户登陆

博客搜索

博客信息

站内链接


返回页顶
Powered by Oblog.