一、标签切换   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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
;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
        
})
    
});
});

二、标签切换数据加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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"
);
            
}
        
})
    
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ 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>
        
你好么？？？
        
<h2>
            
<%
                
out.print(
"你好，这里是jsp"
);
            
%>
        
</h2>
    
</div>
</body>
</html>