极客教程jQuery UI Tabs
标签用于在一个网页上创建可以交换的多个部分，很像一个手风琴。它有助于对内容进行分组，并在同一时间查看特定组的内容。
标签的创建要遵循一个特定的标记，具体如下。
- 选项卡应该被包含在有序列表或无序列表中
- 每个标签的标题都应该被单独包裹在一个列表项中，并且用一个href属性的锚定标签包围起来，指定每个标签面板的内容。
- 每个标签面板可以是空的，但它应该有自己的ID，对应于在相关标签的锚元素中输入的散列名称。
标签面板内的内容可以在同一页面上定义，也可以通过Ajax加载，这两种情况都由与该面板的锚标签相关的href属性处理。
下面我们用jquery UI编写一个简单的4个面板标签的代码。
标签被指定在一个有id的div标签中。它的id在jquery代码中被指定。在这里，我们选择了第2个标签作为默认标签，当网页打开时，它将被选择。你可以通过在活动选项中指定一个不同的值来改变它。
注意：标签的索引从 “0 “开始。
下面的例子说明了jQuery Tabs。
示例1：此示例代码是一个简单的jquery标签，所有的标签都是可以评估的。
- 代码:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#geeks").tabs({
active: 0
})
})
</script>
</body>
</html>
- 输出:
例子2：保持所有标签默认关闭，你也可以选择保持所有标签默认关闭。要做到这一点，我们使用Collapsible选项，并将其值设置为 “True”，同时将active选项的值设置为false。
- 代码:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#geeks").tabs({
active: false,
collapsible: true
})
})
</script>
</body>
</html>
- 输出:
例子3：在这个例子中，我们将禁用标签。我们可以通过使用disable选项来选择禁用特定的标签或所有的标签。首先，我们禁用所有我们为disable选项设置了 “True “值的标签。
- 代码:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
( "#geeks" ).tabs({
disabled:true
})
})
</script>
</body>
</html>
- 输出:
例子4：在这个例子中，我们将禁用一些特定的标签。在下面的代码中，我们禁用了第1和第3个标签（在索引方面为0和2）。
- 代码:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
( "#geeks" ).tabs({
active: 1,
disabled:[0, 2]
})
})
</script>
</body>
</html>
- 输出:
例子5：我们可以选择默认打开的元素，也可以通过默认的鼠标点击事件来打开标签，我们也将把它改为鼠标悬停来打开或激活该标签。
- 代码:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
( "#geeks" ).tabs({
event:'mouseover'
})
})
</script>
</body>
</html>
- 输出:
例子6：在这个例子中，我们将根据该标签的内容来改变标签页的高度。要做到这一点，我们将需要定义最小高度，你可以定义的最短的高度。还有溢出属性，它将根据内容增加标签页的高度。
代码:
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
(document).ready(function() {
("#geeks").tabs().css({
'min-height': '100px',
'overflow': 'auto'
});
})
</script>
</body>
</html>
- 输出:
