- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link rel="stylesheet" type="text/CSS" />
- <title>Insert title here</title>
- </head>
- <body>
- <div id="shell">
- <div id="mainbody">
- <div id="head1">
- </div>
- <div class="ranking">
- <div class="he"></div>
- <div id="rank">
- <div titl="kdiv1" class="normal"><span class="spanR">关于我</span></div>
- <div titl="kdiv2" class="normal">
- <span class="bor"></span><span class="spanR">谈心情</span>
- </div>
- <div titl="kdiv3" class="normal">
- <span class="bor"></span><span class="spanR">技术日志</span>
- </div>
- <div titl="kdiv4" class="normal">
- <span class="bor"></span><span class="spanR">我的相册</span>
- </div>
- <div titl="kdiv5" class="normal">
- <span class="bor"></span><span class="spanR">相关下载</span>
- </div>
- <div titl="kdiv6" class="normal">
- <span class="bor"></span><span class="spanR">留言板</span>
- </div>
- </div>
- <div class="Tail"></div>
- </div>
- <div class="content">
- <div class="contentH"></div>
- <div id="contentC">
- <div class="kdiv1">
- <h1> 联系方式:</h1>
- </div>
- <div class="kdiv2">
- <h1> 心情不错</h1>
- </div>
- <div class="kdiv3">
- <h1> 技术一般</h1>
- </div>
- <div class="kdiv4">
- <h1> 我的相册</h1>
- </div>
- <div class="kdiv5">
- <h1>推荐的下载</h1>
- </div>
- <div class="kdiv6">
- <h1>给我留言吧</h1>
- </div>
- </div>
- <div class="contentT"></div>
- </div>
- <div class="copyright"> </div>
- </div>
- </div>
- <script type="text/javascript">
- function addLoadEvent(func) {//为window添加新事件函数
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = func;
- } else {
- window.onload = function() {
- oldonload();
- func();
- };
- }
- }
- function getInFor(){
- //获取事件响应元素的信息
- var INF= document.getElementById("rank");
- var arr =INF.getElementsByTagName("div");
- for(var i=0;i<arr.length;i++){
- arr[i].onclick=function(){//循环响应事件
- changeK(this,arr);
- };
- }
- }
- function changeK(a,arr){
- //事件函数
- var title=a.getAttribute("titl");
- var changes=document.getElementById("contentC");
- var changeDiv=changes.getElementsByTagName("div");
- // alert("jianrong");
- // alert(a.style.background);
- for(var j=0;j<arr.length;j++){//导航条换色功能
- arr[j].setAttribute("class","normal");
- }
- a.setAttribute("class","normalb");
- //导航条换色功能完
- for(var i=0;i<changeDiv.length;i++){//切换选项卡
- if(changeDiv[i].getAttribute("class")==title)
- changeDiv[i].style.display="block";
- else changeDiv[i].style.display="none";
- }
- }
- function hideAll(){//刚进入网页时默认只显示第一个选项卡
- var changes= document.getElementById("contentC");
- var changeDiv=changes.getElementsByTagName("div");
- for(var j=0;j<changeDiv.length;j++){
- changeDiv[j].style.display="none";
- }
- changeDiv[0].style.display="block";
- }
- addLoadEvent(getInFor);
- addLoadEvent(hideAll);
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/100920135771.html
来源: http://www.codesnippet.cn/detail/100920135771.html