基于JQuery的多标签实现代码

基于jQuery的多标签实现是一种非常流行的前端开发技术。以下是基于jQuery实现多标签的完整攻略。

步骤一：HTML结构

首先，在HTML文件中需要创建一些标签用于存放标签页的内容，例如：

<div class="tabs">
  <ul class="tab-links">
    <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 active">
      <p>Tab 1 content goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Tab 2 content goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>

步骤二：CSS样式

为了让标签页看起来更好看，需要添加一些CSS样式：

.tabs {
  width: 100%;
}
.tab-links {
  margin: 0;
  padding: 0;
}
.tab-links li {
  list-style: none;
  float: left;
  margin-right: 10px;
}
.tab-links a {
  text-decoration: none;
  padding: 9px 15px;
  border-radius: 3px 3px 0 0;
  color: #ffffff;
  background: #6D5CDA;
  font-size: 16px;
  font-weight: bold;
}
.tab-links a:hover {
  background: #5750c9;
}
.tab-links .active a {
  background: #ffffff;
  color: #6D5CDA;
}
.tab-content {
  padding: 15px;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.tab {
  display: none;
}
.tab.active {
  display: block;
}

步骤三：使用jQuery应用点

最后，需要在jQuery中添加一些代码来处理标签页的切换：

$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tab-content ' + currentAttrValue).show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});

以上步骤就是基于jQuery的多标签实现的完整攻略。这种技术可以用于制作包含多个标签页的Web界面，用户可以通过点击标签页切换内容。

示例1：

<div class="tabs">
  <ul class="tab-links">
    <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 active">
      <p>Tab 1 content goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Tab 2 content goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tab-content ' + currentAttrValue).show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});
</script>

示例2：

<div class="tabs">
  <ul class="tab-links">
    <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 active">
      <h2>Tab 1 content title</h2>
      <p>Tab 1 content goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <h2>Tab 2 content title</h2>
      <p>Tab 2 content goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <h2>Tab 3 content title</h2>
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tab-content ' + currentAttrValue).show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});
</script>

以上两个示例都可以通过点击不同的标签页来切换显示相关的内容。