如何在HTML中创建添加标签的按钮，并且在该标签中滚动面板？

问题描述

我不确定如何解释。 here is an example of what i'm trying to do. 首先，唯一的选项卡是（+）。单击它时，我希望它添加一个可以命名的新标签。在新选项卡中是带有滚动窗口的面板（我稍后会添加，我只想弄清楚如何完成此部分）。随着每个新标签的添加，我希望这种情况发生。

我认为我需要使用Javascript。创建一个空数组。单击（+）时，将在HTML代码中调用一个函数，该函数将新的（命名）选项卡添加到数组中。另一个功能将检索标签。

我知道如何做到这一点。我知道我需要HTML的“ onclick”功能，而且我知道使用“ onclick”时需要显示一个文本框来命名标签。我大致知道如何创建选项卡（尽管仍然有些混乱，但是有很多方法可以使用它们）。我知道如何用Javascript创建函数和数组。

我完全不知道从何处开始或如何编码。我对HTML和CSS（和Java脚本）有些陌生，尽管我比较熟悉它，因为我对Java，Python，C，Julia等其他语言非常满意。 HTML和CSS只是非常不同。

到目前为止，当我将鼠标悬停在选项卡上时，就可以显示这些选项卡，并且可以更改颜色。但是当我单击它时什么也没发生。

我非常了解它，我可能无法很好地解释它。但是我真的可以为此提供一些帮助。非常感谢！我已经附上了该区域专用的代码。我对Javascript的了解不多，对此感到抱歉。

var tab = [];

function addTab() {}

function getTab(position) {}

<style>body {
  margin: 0;
  padding: 0;
  background-color: rgb(24,28,41);
  color: rgb(255,255,255);
  font-family: "Helvetica","Arial",sans-serif;
}

.card {
  background-color: rgb(24,41);
  padding: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5,105,256);
  border-radius: 3px;
  margin: 1%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-auto-rows: auto;
  grid-gap: 1%;
  margin: 0 1% 0 1%;
  background-color: rgb(24,41);
}

.column {
  padding: 15px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(5,256);
  border-radius: 3px;
}

.group {
  margin-bottom: 20px;
}


/* adds border */

#content {
  border: solid;
  border-width: 2px 2px 2px 2px;
  border-color: rgb(20,90,241);
}


/* makes the active tab */

#selected {
  padding-bottom: 1px;
  background: rgb(24,41);
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-image: linear-gradient(-182.9deg,rgb(20,241) 50%,rgb(5,256) 50%);
}


/* Style the buttons that are used to open the tab content */

.tab button {
  background-color: inherit;
  float: left;
  border: solid;
  border-color: rgb(24,41);
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

</style>

<head>
  <!-- Title and charset -->
  <title>Testing </title>
  <meta charset="utf-8">

</head>

<div class="column">

  <div class="tab">
    <button class="tablinks" onclick="javascriptAddTabFunction">+</button>
  </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript tabs