Question

正如你在下面的小提琴中看到的那样。

点击tab1＆amp; tab2我们得到tab1信息＆amp; 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() and show()

，效果会更好

Answer 2

＆＃13;

$('td.tab').on('click', function () {
    $('td.tab').removeClass('active');
    $(this).addClass('active');
    $('td div.tab-content').removeClass('active');
    $('td div#' + $(this).data('tab')).addClass('active');
});

/* Without table */
$('dt.tab').on('click', function () {
    $('dt.tab').removeClass('active');
    $(this).addClass('active');
    $('dd.tab-content').removeClass('active');
    $('dd#' + $(this).data('tab')).addClass('active');
});

＆＃13;

dt.tab {
  float: left;
  padding: 10px;
}
.tab:not(.active) {
  color: #ccc;
}
.tab:hover, .tab.active:hover {
  cursor: pointer;
  background-color: #ccc;
  color: #ff0000;
}
.tab-content {
  clear: both;
}
.tab-content:not(.active) {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-tab="tab1-info" class="tab"><div contenteditable>tab1</div></td>
    <td data-tab="tab2-info" class="tab active"><div contenteditable>tab2</div></td>
  </tr>
  <tr>
    <td>
      <div id="tab1-info" contenteditable class="tab-content active">tab1 info</div>
      <div id="tab2-info" contenteditable class="tab-content">tab2 info</div>
    </td>
  </tr>
</table>

<!-- Or without table because tables should not be used as layout elements -->
<dl>
    <dt data-tab="tab1-info" class="tab"><div contenteditable>tab1</div></dt>
    <dt data-tab="tab2-info" class="tab not-active"><div contenteditable>tab2</div></dt>
    <dd id="tab1-info" class="tab-content active">
        <div contenteditable>tab1 info</div>
    </dd>
    <dd id="tab2-info" class="tab-content">
        <div contenteditable>tab2 info</div>
    </dd>
</dl>

＆＃13;

Answer 3

对宝贝来说，这就是你需要的。标识要触发click事件的元素。然后，添加输入字段，如

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

这是片段！

        $('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');
    });
    //for table
    $('div.tab-content').on('click',function(){
        $(this).append('<input type="text">');

    });
    //for div
    $('dd div:first').on('click',function(){
        $(this).append('<input type="text">');

    });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

希望它有所帮助！

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

3 个答案: