<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>