Javascript 如何在单击选项卡内容时获取文本框

正如你在下面的小提琴中所看到的

单击tab1和tab2，我们将获得tab1信息和tab2信息

现在，当我们点击tab1 info时，我想在它旁边有一个文本框

只有当用户单击选项卡1信息时，才会出现文本框。希望我现在明白了

我有这个 ,

这可能是一个重复的问题，请帮助我。我应该使用jQuery还是Javascript来实现这一点

jQuery

        $('td.tab').on('click', function () {
        $('td.tab').toggleClass('not-active');
        $('td div.tab-content').toggleClass('not-active');
    });

    /* Without table */
    $('dt.tab').on('click', function () {
        $('dt.tab').toggleClass('not-active');
        $('dd.tab-content').toggleClass('not-active');
    });

HTML

这就是你要找的吗？我不能清楚地理解这个问题，但是

如果使用

hide（）和show（）

$（'td.tab'）。在（'click'，函数（）{
$（'td.tab'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（'td div.tab-content'）.removeClass（'active'）；
$（'td div#'+$（this）.data（'tab'））.addClass（'active'）；
});
/*没有桌子*/
$（'dt.tab'）。在（'click'，函数（）{
$（'dt.tab'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（'dd.tab-content'）.removeClass（'active'）；
$（'dd#'+$（this）.data（'tab'））.addClass（'active'）；
});
dt.tab{
浮动：左；
填充：10px；
}
.tab：不可用（.active）{
颜色：#ccc；
}
.tab:悬停，.tab.活动：悬停{
光标：指针；
背景色：#ccc；
颜色：#ff0000；
}
.选项卡内容{
明确：两者皆有；
}
.选项卡内容：未（.active）{
显示：无；
}

表1
表2
表1信息
表2信息
表1
表2
表1信息
表2信息
准确地说，这就是你需要的。
标识要触发单击事件的元素。然后，添加输入字段，如

        $(this).append('<input type="text">');


表1
表2
表1信息
表2信息
表1
表2
表1信息
表2信息
你能说得更具体一点吗？我不知道你想要什么……jQuery是一个完全用JavaScript（又称ECMAscript）编写的库。在tab content元素中添加一个输入字段应该是正确的，正如你在fiddle中看到的那样。单击tab1和tab2，我们将获得tab1信息和tab2信息。现在当我们点击tab1信息时，我想在它旁边有一个文本框。只有当用户单击tab1 info时，才会出现文本框。希望我现在明白了。我可以知道你做了什么改变吗。感谢您可以查看上面的代码片段，主要是我使用了
数据选项卡
来识别哪个
选项卡信息
属于哪个
选项卡按钮
确定，但我的要求是，当用户单击tab1时->tab1信息将显示，现在当用户单击tab1信息时，tab1信息旁应显示一个新文本框。当用户单击tab1信息时，tab1信息旁应显示一个新文本框
        dt.tab {
      float: left;
      padding: 10px;
    }
    .tab.not-active {
      color: #ccc;
    }
    .tab:hover, .tab.not-active:hover {
      cursor: pointer;
      background-color: #ccc;
      color: #ff0000;
    }
    .tab-content {
      clear: both;
    }
    .tab-content.not-active {
      display: none;
    }

        $(this).append('<input type="text">');