溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、標簽切換
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="app.css" rel="stylesheet"/> <script src="jquery-1.10.1.min.js"></script> <script src="app.js"></script> </head> <body> <ul id="tabfirst"> <li class="tabin">標簽1</li> <li>標簽2</li> <li>標簽3</li> </ul> <div class="content contentfirst"> 內容1 </div> <div class="contentfirst"> 內容2 </div> <div class="contentfirst"> 內容3 </div> </body> </html>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
background-color: #868686;
color: #FFFFFF;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
.tabin{
background-color: #6e6e6e;
border: 1px solid #6e6e6e;
}
.contentfirst{
clear: both;
background-color: #6e6e6e;
color: #FFFFFF;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
.content{
display: block;
}var timeoutid;
$(document).ready(function(){
$("#tabfirst li").each(function(index){
var liNode = $(this);
$(this).mouseover(function(){
timeoutid=setTimeout(function(){
$("div.content").removeClass("content");
$("#tabfirst li.tabin").removeClass("tabin");
$("div").eq(index).addClass("content");
liNode.addClass("tabin");
},300)
}).mouseout(function(){
clearTimeout(timeoutid);
})
});
});二、標簽切換數據加載
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="app.css" rel="stylesheet"/> <script src="jquery-1.10.1.min.js"></script> <script src="app.js"></script> </head> <body> <ul id="tabfirst"> <li class="tabin">標簽1</li> <li>標簽2</li> <li>標簽3</li> </ul> <div class="content contentfirst"> 內容1 </div> <div class="contentfirst"> 內容2 </div> <div class="contentfirst"> 內容3 </div> <br /> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">裝載完整頁面</li> <li>裝載部分頁面</li> <li>裝載網絡數據</li> </ul> <div id="contentsecond"> <div id="realcontent"> </div> </div> </body> </html>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
background-color: #868686;
color: #FFFFFF;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
.tabin{
background-color: #6e6e6e;
border: 1px solid #6e6e6e;
}
.contentfirst{
clear: both;
background-color: #6e6e6e;
color: #FFFFFF;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
.content{
display: block;
}
#tabsecond li{
float: left;
background-color: #FFFFFF;
color: blue;
padding: 10px;
margin-right: 2px;
cursor: pointer;
}
#tabsecond li.tabin{
background-color: #f2f6f8;
border: 1px solid #000000;
border-bottom: 0;
z-index: 100;
position: relative;
}
#contentsecond{
width: 500px;
height: 200px;
padding: 10px;
background-color: #F2F6F8;
clear: left;
border: 1px solid #000000;
top: -2px;
position: relative;
}var timeoutid;
$(document).ready(function(){
$("#tabfirst li").each(function(index){
var liNode = $(this);
$(this).mouseover(function(){
timeoutid=setTimeout(function(){
$("div.content").removeClass("content");
$("#tabfirst li.tabin").removeClass("tabin");
$("div").eq(index).addClass("content");
liNode.addClass("tabin");
},300)
}).mouseout(function(){
clearTimeout(timeoutid);
})
});
$("#realcontent").load("mytab.html");
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if(index==0){
$("#realcontent").load("mytab.html");
}else if(index == 1){
$("#realcontent").load("mytab.html");
}else if(index == 2){
$("#realcontent").load("mytab.html");
}
})
})
});<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>Insert title here</title>
</head>
<body>
<div>
你好么？？？
<h3>
<%
out.print("你好，這里是jsp");
%>
</h3>
</div>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
