<!--
所学技术:
1..className = "sec1";
2.getElementById.getElementsByTagName 获取对象集
3.target="_blank" 打开新窗口
4.list-style-type:none; 列表类型
5.line-height 行高
-->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#header{background-color:#F8F4EF;height:200px;width:400px;border:1px solid #ECE1D5;font-family:"宋体";font-size:12px;}
#menu{margin:0;padding:0;list-style-type:none;}
#menu li{display:block;width:100px;line-height:23px;text-align:center;float:left;cursor:pointer;}
.sec1{background-color:#FFFFCC;}
.sec2{background-color:#00CCFF;}
.block{display:block;}
.unblock{display:none;}
</style>
<script >
function secBoard(n) {
var menu = document.getElementById('menu').getElementsByTagName('li');
var main = document.getElementById('main').getElementsByTagName('li');
for (i = 0; i < menu.length; i++) {//全部变为sec1
menu[i].className = "sec1";
}
menu[n].className = "sec2";
for (i = 0; i < main.length; i++) {//全部变为none
main[i].className = "unblock";
}
main[n].className = "block";
}
</script>
</head>
<body>
<div id="header">
<!--导航选项区域-->
<ul id="menu">
<li class="sec1" οnmοuseοver="secBoard(0)">
最新新闻
</li>
<li class="sec2" οnmοuseοver="secBoard(1)">
最新文章
</li>
<li class="sec1" οnmοuseοver="secBoard(2)">
最新日志
</li>
<li class="sec1" οnmοuseοver="secBoard(3)">
论坛新帖
</li>
</ul>
<!--导航选项区域-->
<!--内容显示区域-->
<ul id="main">
<li class="block" >
第一个内容:
<a target="_blank" href="#">
预防蜱虫必知的11个知识问答
</a>
</li>
<li class="unblock" >
第二个内容:
<a target="_blank" href="#">
购物商城限时抢购,倒计时JS代码
</a>
</li>
<li class="unblock" >
第三个内容:
<a target="_blank" href="#">
落魄千万富翁的一首歌,很man!
</a>
</li>
<li class="unblock" >
第四个内容:
<a target="_blank" href="#">
七十六个网站用户体验要点
</a>
</li>
</ul>
<!--内容显示区域-->
</div>
</body>
</html>
js选项卡
最新推荐文章于 2013-03-15 11:44:12 发布