迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 jQuery 中使用标签

作者:迹忆客 最近更新:2024/03/24 浏览次数:

在今天的文章中,我们将学习 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 的浏览器中运行上面的代码片段,它会显示以下结果。

输出:

运行代码

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:98 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 触发点击

发布时间:2024/03/24 浏览次数:175 分类:JavaScript

在今天的文章中,我们将学习 jQuery 中的触发点击事件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便