在 jQuery 中使用标签
在今天的文章中,我们将学习 jQuery 中的标签。
jQuery 中的标签
Tabs
是具有多个区域的单个内容区域,每个区域与列表中的标题相关联。标签通常用于将内容分成多个部分,这些部分可以像手风琴一样被换出以节省空间。
标签有一组选定的标记,应该用于它们正常工作:
每个标签面板的内容可以在网页上定义或通过 Ajax 加载;两者都是根据与标签关联的锚点的 href
自动处理的。使用默认标签在单击时设置为关闭。
但是,可以修改事件以将鼠标悬停在事件选项上。让我们通过以下示例来理解它。
代码 - HTML:
<ul id="tabs">
<li><a id="home">Home</a></li>
<li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>
代码 - CSS:
#tabs {
width: 100%;
height:30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {cursor:pointer;}
#tabs li {
float:left;
list-style:none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-right:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
outline:none;
}
#tabs li a {
font-family:Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display:block;
background: #FFF;
border-top-left-radius:3px;
border-top-right-radius:3px;
text-decoration:none;
outline:none;
}
#tabs li a.inactive{
padding-top:5px;
padding-bottom:8px;
padding-left: 8px;
padding-right: 8px;
color:#666666;
background: #EEE;
outline:none;
border-bottom: solid 1px #CCC;
}
#tabs li a:hover, #tabs li a.inactive:hover {
color: #5685bc;
outline:none;
}
.container {
clear:both;
width:100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align:left;
padding-top: 20px;
}
.container h2 { margin-left: 15px; margin-right: 15px; margin-bottom: 10px; color: #5685bc; }
.container p { margin-left: 15px; margin-right: 15px; margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }
.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }
.container li { padding-bottom: 5px; margin-left: 5px;}
代码 - JavaScript:
$(document).ready(function() {
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function() {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) {
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#' + t + 'C').fadeIn('slow');
}
});
});
在上面的例子中,我们定义了带有 ul
标签的标签,它将列出所有标签。默认情况下,标签的内容将使用 hide
方法隐藏,默认情况下,first
标签将可见。
一旦用户单击任何标签,它就会将 .inactive
类应用于所有列表元素,并从选定的列表元素中删除 .inactive
类。这将确保在任何给定时间只有选定的列表元素会被激活
。
尝试在任何支持 jQuery 的浏览器中运行上面的代码片段,它会显示以下结果。
输出:
运行代码
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。