一、标签切换   

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>