使用jQuery根据包含子DIV的href链接更改DIV中的内容

Question

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

我想要的是用点击的<a>标签的内容来改变DIV中的内容。问题是，在我的<a>标记中，我有另一个嵌套的DIV，其中包含一些文本，我不希望这些文本在更改时显示。

如何在更改时只显示<a>标签的内容，而不显示它的子div？

下面是我的代码和JSFiddle的链接

​

$(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>

​

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

Answer 1

像这样更新你的点击事件；

​

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

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

​