📌  相关文章
📜  textarea javascript中的选项卡(1)

📅  最后修改于: 2023-12-03 15:20:36.935000             🧑  作者: Mango

用JavaScript实现文本框选项卡

当需要让用户在文本框中输入多个不同的内容时，我们可以考虑用选项卡的方式解决。在这篇文章中，我们将通过JavaScript来实现一个简单的文本框选项卡。

实现步骤
  1. 准备HTML结构
<div class="tabs">
  <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
  <button class="tablinks" onclick="openTab(event, 'tab4')">Tab 4</button>
  
  <div id="tab1" class="tabcontent">
    <textarea></textarea>
  </div>
  
  <div id="tab2" class="tabcontent">
    <textarea></textarea>
  </div>
  
  <div id="tab3" class="tabcontent">
    <textarea></textarea>
  </div>
  
  <div id="tab4" class="tabcontent">
    <textarea></textarea>
  </div>
</div>

我们先准备好一个包含四个选项卡的HTML结构。每个选项卡中包含一个文本框，用于用户输入内容。

  1. 使用CSS美化选项卡
/* 隐藏所有选项卡内容 */
.tabcontent {
  display: none;
}

/* 设置选项卡按钮样式 */
.tablinks {
  background-color: #ddd;
  color: #333;
  border: none;
  outline: none;
  margin: 5px;
  padding: 10px;
  cursor: pointer;
}

/* 设置选中选项卡按钮样式 */
.active {
  background-color: #ccc;
}

/* 设置文本框样式 */
textarea {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
}

这里我们对选项卡和文本框进行了简单的CSS样式设置，使界面看起来更美观。

  1. 编写JavaScript代码
/* 根据事件触发器打开对应选项卡 */
function openTab(evt, tabName) {
  // 获取所有选项卡内容
  var tabcontent = document.getElementsByClassName("tabcontent");

  // 隐藏所有选项卡内容
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // 获取所有选项卡按钮
  var tablinks = document.getElementsByClassName("tablinks");

  // 取消所有选项卡按钮的选中状态
  for (var i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // 显示当前选项卡内容
  document.getElementById(tabName).style.display = "block";

  // 设置当前选项卡按钮为选中状态
  evt.currentTarget.className += " active";
}

这里是实现选项卡切换的JavaScript代码。通过获取选项卡按钮和选项卡内容的DOM元素，我们可以使得点击对应按钮时，对应的选项卡内容显示出来。

代码演示

现在我们将上面的代码整合到一起，并提供了一个完整的代码演示，你可以点击下方演示按钮查看效果。

<!DOCTYPE html>
<html>
  <head>
    <title>Textarea Tabs Demo</title>

    <style>
      /* 隐藏所有选项卡内容 */
      .tabcontent {
        display: none;
      }

      /* 设置选项卡按钮样式 */
      .tablinks {
        background-color: #ddd;
        color: #333;
        border: none;
        outline: none;
        margin: 5px;
        padding: 10px;
        cursor: pointer;
      }

      /* 设置选中选项卡按钮样式 */
      .active {
        background-color: #ccc;
      }

      /* 设置文本框样式 */
      textarea {
        width: 100%;
        height: 200px;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <div class="tabs">
      <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
      <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
      <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
      <button class="tablinks" onclick="openTab(event, 'tab4')">Tab 4</button>

      <div id="tab1" class="tabcontent">
        <textarea></textarea>
      </div>

      <div id="tab2" class="tabcontent">
        <textarea></textarea>
      </div>

      <div id="tab3" class="tabcontent">
        <textarea></textarea>
      </div>

      <div id="tab4" class="tabcontent">
        <textarea></textarea>
      </div>
    </div>

    <script>
      /* 根据事件触发器打开对应选项卡 */
      function openTab(evt, tabName) {
        // 获取所有选项卡内容
        var tabcontent = document.getElementsByClassName("tabcontent");

        // 隐藏所有选项卡内容
        for (var i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }

        // 获取所有选项卡按钮
        var tablinks = document.getElementsByClassName("tablinks");

        // 取消所有选项卡按钮的选中状态
        for (var i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // 显示当前选项卡内容
        document.getElementById(tabName).style.display = "block";

        // 设置当前选项卡按钮为选中状态
        evt.currentTarget.className += " active";
      }
    </script>
  </body>
</html>
总结

在本篇文章中，我们通过JavaScript实现了一个简单的文本框选项卡。这种方式可以让用户输入多个不同的内容变得更加简单和清晰。本文仅仅介绍了最基础的实现方法，你可以根据实际需求对代码进行扩展和优化，使得选项卡效果更加完美。