Question

jquery easyui 如何更改样式

jquery easyui 如何更改样式

Answer 1

想更改什么样式

Answer 2

更改样式文件。

Answer 3

首先，当然实现静态页面的代码，具体如下：

01
<ul class="tabs">
02
<li><a href="#tab1">Gallery</a></li>
03
<li><a href="#tab2">Submit</a></li>
04
</ul>
05
<div class="tab_container">
06
<div id="tab1" class="tab_content">
07
<!--Content--></div>
08
<div id="tab2" class="tab_content">
09
<!--Content--></div>
10
</div>

第二步，实现CSS样式

页签样式：

01
ul.tabs {
02
margin: 0;
03
padding: 0;
04
float: left;
05
list-style: none;
06
height: 32px; /*--Set height of tabs--*/
07
border-bottom: 1px solid #999;
08
border-left: 1px solid #999;
09
width: 100%;
10
}
11
ul.tabs li {
12
float: left;
13
margin: 0;
14
padding: 0;
15
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
16
line-height: 31px; /*--Vertically aligns the text within the tab--*/
17
border: 1px solid #999;
18
border-left: none;
19
margin-bottom: -1px; /*--Pull the list item down 1px--*/
20
overflow: hidden;
21
position: relative;
22
background: #e0e0e0;
23
}
24
ul.tabs li a {
25
text-decoration: none;
26
color: #000;
27
display: block;
28
font-size: 1.2em;
29
padding: 0 20px;
30
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
31
outline: none;
32
}
33
ul.tabs li a:hover {
34
background: #ccc;
35
}
36
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
37
background: #fff;
38
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
39
}
页签内容样式：

01
.tab_container {
02
border: 1px solid #999;
03
border-top: none;
04
overflow: hidden;
05
clear: both;
06
float: left; width: 100%;
07
background: #fff;
08
}
09
.tab_content {
10
padding: 20px;
11
font-size: 1.2em;
12
}
第三步，用jQuery实现页签交换功能

01
$(document).ready(function() {
02

03
//When page loads...
04
$(".tab_content").hide(); //Hide all content
05
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
06
$(".tab_content:first").show(); //Show first tab content
07

08
//On Click Event
09
$("ul.tabs li").click(function() {
10

11
$("ul.tabs li").removeClass("active"); //Remove any "active" class
12
$(this).addClass("active"); //Add "active" class to selected tab
13
$(".tab_content").hide(); //Hide all tab content
14

15
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
16
$(activeTab).fadeIn(); //Fade in the active ID content
17
return false;
18
});
19

20
});
至此，页签功能实现，完毕！

具体可见DEMO：用 CSS+jQuery实现页签