使用jQuery实现简单的tab框实例

关于使用jQuery实现简单的tab框实例的攻略，大致可以分为以下几个步骤：

1. HTML结构

首先，我们要准备好tab切换的HTML结构。可以是UL列表结构，也可以是DIV容器结构。下面是一个常见的UL列表结构：

<ul class="tab-menu">
  <li class="active"><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane active">Tab 1 Content</div>
  <div id="tab2" class="tab-pane">Tab 2 Content</div>
  <div id="tab3" class="tab-pane">Tab 3 Content</div>
</div>

2. CSS样式

接下来，我们需要使用CSS样式来对tab切换进行样式设置，如下：

.tab-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}

.tab-menu li {
  float: left;
}

.tab-menu li.active a {
  background-color: #eee;
}

.tab-menu li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.tab-content .tab-pane {
  display: none;
}

.tab-content .active {
  display: block;
}

3. jQuery代码

最后，我们要使用jQuery代码来实现tab切换。具体可以如下：

$(document).ready(function(){
  // 通过点击tab标签来进行切换
  $('.tab-menu li a').click(function(){
    // 首先移除所有tab标签的active类
    $('.tab-menu li').removeClass('active');
    // 给当前点击的标签元素添加active类
    $(this).parent().addClass('active');
    // 取出对应的tab内容元素id
    var target = $(this).attr('href');
    // 首先隐藏所有的tab内容元素
    $('.tab-content .tab-pane').hide();
    // 然后显示对应的tab内容元素
    $(target).show();
    // 阻止默认a标签的跳转事件
    return false;
  });
});

示例说明1

下面是一个完整的tab切换示例，其中UL列表结构和CSS样式使用bootstrap框架，jQuery使用的是CDN链接：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap Tab Example</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style type="text/css">
    .tab-menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border-bottom: 1px solid #ddd;
    }

    .tab-menu li {
      float: left;
    }

    .tab-menu li.active a {
      background-color: #eee;
    }

    .tab-menu li a {
      display: block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .tab-content .tab-pane {
      display: none;
    }

    .tab-content .active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Bootstrap Tab Example</h2>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane active">Home Content</div>
      <div id="menu1" class="tab-pane">Menu 1 Content</div>
      <div id="menu2" class="tab-pane">Menu 2 Content</div>
      <div id="menu3" class="tab-pane">Menu 3 Content</div>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

在上面的代码中，我们使用了bootstrap框架中的nav-tabs组件来实现tab切换。

示例说明2

下面是另一个tab切换示例，其中UL列表结构和CSS样式使用自定义的样式和布局：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Custom Tab Example</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div class="container">
    <h2>Custom Tab Example</h2>
    <ul class="tab-menu">
      <li class="active"><a href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
      <li><a href="#tab3">Tab 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="tab1" class="tab-pane active">Tab 1 Content</div>
      <div id="tab2" class="tab-pane">Tab 2 Content</div>
      <div id="tab3" class="tab-pane">Tab 3 Content</div>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.tab-menu li a').click(function(){
        $('.tab-menu li').removeClass('active');
        $(this).parent().addClass('active');
        var target = $(this).attr('href');
        $('.tab-content .tab-pane').hide();
        $(target).show();
        return false;
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们自己定义了UL列表结构和CSS样式，并使用jQuery代码实现tab切换功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用jQuery实现简单的tab框实例 - Python技术站