javascript - 如何在点击选项卡内容时获取文本框

Question

正如您在下面的 fiddle 中看到的那样。

点击 tab1 和 tab2 我们得到 tab1 信息和 tab2 信息。

现在当我们点击tab1 信息 时，我想在它旁边显示一个文本框。

只有当用户点击tab1 信息 时，文本框才会出现。希望我现在清楚了。

我有这个 fiddle ,

这可能是一个重复的问题，请帮助我。我应该使用 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

        <table>
      <tr>
        <td class="tab"><div contenteditable>tab1</div></td>
        <td class="tab not-active"><div contenteditable>tab2</div></td>
      </tr>
      <tr>
        <td>
          <div contenteditable class="tab-content">tab1 info</div>
          <div contenteditable class="tab-content not-active">tab2 info</div>
        </td>
      </tr>
    </table>

    <!-- Or without table because tables should not be used as layout elements -->
    <dl>
        <dt class="tab"><div contenteditable>tab1</div></dt>
        <dt class="tab not-active"><div contenteditable>tab2</div></dt>
        <dd class="tab-content">
            <div contenteditable>tab1 info</div>
        </dd>
        <dd class="tab-content not-active">
            <div contenteditable>tab2 info</div>
        </dd>
    </dl>

CSS

        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;
    }

Answer 1

是this你在找什么？无法清楚地理解问题，但是

最好使用hide() 和show()