JavaScript实现的原生态Tab标签页功能【兼容IE6】

下面我会详细讲解如何使用JavaScript实现原生态Tab标签页功能的完整攻略。这个攻略并且兼容IE6浏览器。

准备工作

首先，我们需要准备好HTML、CSS和JavaScript文件。其中，HTML文件中需要包含一个自定义class为tabContainer的容器元素和多个tab标签。此外，CSS文件中需要设置tab标签的样式，这里我们可以采用Flex布局来实现标签页的排列。JavaScript文件中需要定义处理标签页切换的函数和初始化的代码。

实现过程

HTML结构

首先，我们需要定义HTML结构来布局标签页容器和标签页内容。这里，我们可以通过使用ul标签和li标签来设置标签页，并使用div标签来包含标签页内容。

举个例子，我们可以这样设置HTML结构：

<div class="tabContainer">
  <ul class="tabs">
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1">
    <p>Tab1 Content Here</p>
  </div>
  <div id="tab2">
    <p>Tab2 Content Here</p>
  </div>
</div>

CSS样式

接下来，我们需要设置标签页的样式，这里我们使用Flex布局来实现标签页的排列。下面是一个简单的示例：

.tabContainer .tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.tabContainer .tabs li {
  margin: 0;
  padding: 10px 20px;
}

.tabContainer .tabs li a {
  color: #333;
  text-decoration: none;
}

.tabContainer .tabs li.active a {
  color: #fff;
  background-color: #333;
}

.tabContainer .tabContent {
  border: 1px solid #333;
  padding: 10px 20px;
}

JavaScript代码

最后，我们需要使用JavaScript代码来实现标签页的切换效果。我们可以使用事件监听器来捕捉标签页的点击事件，并使用setAttribute和classList方法来控制标签页的显示和隐藏。

下面是一个简单的JavaScript示例：

var tabs = document.querySelectorAll('.tabContainer .tabs li');
var tabContents = document.querySelectorAll('.tabContainer .tabContent');

function initTabs() {
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', showTab);
  }
}

function showTab(event) {
  event.preventDefault();
  var tabId = event.currentTarget.firstElementChild.getAttribute('href');
  var currentTab = document.querySelector(tabId);
  hideTabs();
  currentTab.style.display = 'block';
  event.currentTarget.classList.add('active');
}

function hideTabs() {
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = 'none';
    tabs[i].classList.remove('active');
  }
}

initTabs();

在这个示例代码中，我们首先通过querySelectorAll方法选中页面中的标签页和标签页内容。然后，我们定义了一个initTabs函数，并在其中使用addEventListener方法来监听所有标签页的点击事件。

在事件处理函数showTab中，我们首先使用getAttribute方法获取当前标签页的ID，接着使用querySelector方法获取当前标签页内容的元素，并将其他标签页隐藏。最后，我们在当前标签页上添加一个类名，以实现标签页选中时的样式效果。

最后，我们在initTabs函数中调用hideTabs函数，以确保所有标签页在页面刷新时都处于隐藏状态。

示例说明

下面是两个使用JavaScript实现原生态Tab标签页功能的示例说明。

示例1：基本标签页

这个示例中，我们创建了一个简单的标签页，用于切换两个不同的内容页。

<div class="tabContainer">
  <ul class="tabs">
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1" class="tabContent">
    <p>Tab1 Content Here</p>
  </div>
  <div id="tab2" class="tabContent">
    <p>Tab2 Content Here</p>
  </div>
</div>

var tabs = document.querySelectorAll('.tabContainer .tabs li');
var tabContents = document.querySelectorAll('.tabContainer .tabContent');

function initTabs() {
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', showTab);
  }
}

function showTab(event) {
  event.preventDefault();
  var tabId = event.currentTarget.firstElementChild.getAttribute('href');
  var currentTab = document.querySelector(tabId);
  hideTabs();
  currentTab.style.display = 'block';
  event.currentTarget.classList.add('active');
}

function hideTabs() {
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = 'none';
    tabs[i].classList.remove('active');
  }
}

initTabs();

在这个示例中，我们使用了与前面所述的HTML和JavaScript代码相同的代码。你可以直接将这些代码放入你的网页中，并在页面中生成标签页。

示例2：自定义样式

这个示例中，我们创建了一个具有自定义样式的标签页，并使用Flex布局来排列标签页。

<div class="tabContainer">
  <ul class="tabs">
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
  </ul>
  <div id="tab1" class="tabContent">
    <p>Tab1 Content Here</p>
  </div>
  <div id="tab2" class="tabContent">
    <p>Tab2 Content Here</p>
  </div>
  <div id="tab3" class="tabContent">
    <p>Tab3 Content Here</p>
  </div>
</div>

.tabContainer .tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.tabContainer .tabs li {
  margin: 0;
  padding: 10px 20px;
}

.tabContainer .tabs li a {
  color: #333;
  text-decoration: none;
}

.tabContainer .tabs li.active a {
  color: #fff;
  background-color: #333;
}

.tabContainer .tabContent {
  border: 1px solid #333;
  padding: 10px 20px;
}

var tabs = document.querySelectorAll('.tabContainer .tabs li');
var tabContents = document.querySelectorAll('.tabContainer .tabContent');

function initTabs() {
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', showTab);
  }
}

function showTab(event) {
  event.preventDefault();
  var tabId = event.currentTarget.firstElementChild.getAttribute('href');
  var currentTab = document.querySelector(tabId);
  hideTabs();
  currentTab.style.display = 'block';
  event.currentTarget.classList.add('active');
}

function hideTabs() {
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = 'none';
    tabs[i].classList.remove('active');
  }
}

initTabs();

在这个示例中，我们定义了一个自定义样式，并在showTab函数中添加了active类名以实现选中标签页的样式效果。此外，我们在tabs和tabContents变量中添加了第三个标签页，并对CSS和JavaScript代码进行了必要的修改。

这样，我们就成功地实现了一个自定义样式的原生态Tab标签页功能。