<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<%-- <script src="Scripts/tab.js"></script>--%>
<style type="text/css">
#tab_nav {
width: 300px;
height: 14px;
}
#tab_nav li {
height: 30px;
width: 50px;
list-style-type: none;
float: left;
text-align: center;
line-height: 30px;
border: 1px solid #e5e5e5;
margin-right: 2px;
cursor: pointer;
}
.current {
background-color: #cccccc;
color: red;
}
.tab_items {
width: 400px;
height: 300px;
border: 1px solid #e5e5e5;
}
.off {
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="tab_nav">
<li class="current">新闻</li>
<li>生活</li>
<li>体育</li>
<li>抽奖</li>
</ul>
<div id="tabs">
<div class="tab_items">
新闻
</div>
<div class="tab_items off">
生活
</div>
<div class="tab_items off">
体育
</div>
<div class="tab_items off">
抽奖
</div>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
var T = function(){
this.init.apply(this, arguments);
};
T.prototype = {
init:function () {
var uls = document.getElementById("tab_nav");
if (uls == null) return false;
var lis = uls.getElementsByTagName("li");
if (lis == null) return false;
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = this.click(i);
}
},
click: function (n) {
return function() {
var tabs = document.getElementById("tabs");
if (tabs == null) return false;
var divs = tabs.getElementsByTagName("div");
if (divs == null) return false;
for (var m = 0; m < divs.length; m++) {
if (n == m) {
divs[m].className = "tab_items";
} else {
divs[m].className = "tab_items off";
}
}
};
}
};
$(function() {
T.prototype.init();
});
</script>