根据包含子DIV的href链接使用jQuery[duplicate]更改DIV内部的内容

Question

我不知道如何为这个问题设置一个标题。

我想要的是用单击的标记的内容更改DIV内部的内容。问题是，在我的标记中，我有另一个嵌套的DIV和一些文本，我不希望该文本在更改时显示。

如何在更改时只显示标记的内容，而不显示其子div？

这是我的代码和指向JSFiddle的链接

null

$(document).on('click', 'a.dropdown__link', function() {
  $('.dropdown__label').text($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul data-tabs="" role="tablist">
  <li role="presentation">
    <a data-tabby-default="" href="#seo" class="heading-4 dropdown__link">
                        SEO
                        <div class="tabs-card__tab-subtitle">Description 1</div>
                     </a>
  </li>
  <li role="presentation">
    <a href="#web" class="heading-4 dropdown__link">
                        Web
                        <div class="tabs-card__tab-subtitle">Description 2</div>
                     </a>
  </li>
  <li role="presentation">
    <a href="#marketing" class="heading-4 dropdown__link">
                        Social
                        <div class="tabs-card__tab-subtitle">Description 3</div>
                     </a>
  </li>
  <li role="presentation">
    <a href="#marketingppc" class="heading-4 dropdown__link">
                        PPC
                        <div class="tabs-card__tab-subtitle">Description 4</div>
                     </a>
  </li>
</ul>

<div class="dropdown__label">Default text</div>

null

https://jsfidle.net/mariokala/zmdjoy9b/28/

Answer 1

如下所示更新您的click事件；

null

$(document).on('click', 'a.dropdown__link', function(){
    $('.dropdown__label').text($(this).contents().not($(this).children()).text());
});

html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul data-tabs="" role="tablist">
  <li role="presentation">
    <a data-tabby-default="" href="#seo" class="heading-4 dropdown__link" id="tabby-toggle_think" role="tab" aria-controls="seo" aria-selected="true" tabindex="0">
                        SEO
                        <div class="tabs-card__tab-subtitle">Description 1</div>
                     </a>
  </li>
  <li role="presentation">
    <a href="#web" class="heading-4 dropdown__link" id="tabby-toggle_execute" role="tab" aria-controls="web" aria-selected="false" tabindex="-1">
                        Web
                        <div class="tabs-card__tab-subtitle">Description 2</div>
                     </a>
  </li>
  <li role="presentation">
    <a href="#marketing" class="heading-4 dropdown__link" id="tabby-toggle_manage" role="tab" aria-controls="marketing" aria-selected="false" tabindex="-1">
                        Social
                        <div class="tabs-card__tab-subtitle">Description 3</div>
                     </a>
  </li>
  <li role="presentation">
    <a href="#marketingppc" class="heading-4 dropdown__link" id="tabby-toggle_manage" role="tab" aria-controls="marketingppc" aria-selected="false" tabindex="-1">
                        PPC
                        <div class="tabs-card__tab-subtitle">Description 4</div>
                     </a>
  </li>
</ul>

<div class="dropdown__label">Default text</div>