根据包含带有jQuery的子DIV的href链接更改DIV内的内容[重复]答案

【问题标题】：Change the content inside DIV based on href link containing child DIV with jQuery [duplicate]根据包含带有jQuery的子DIV的href链接更改DIV内的内容[重复]
【发布时间】：2021-06-21 03:14:54
【问题描述】：

我不确定如何为这个问题设置标题。

我想要的是使用单击的<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/

【问题讨论】：

jsfiddle.net/7qn6wodu

标签： html jquery css

【解决方案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>

【讨论】：

谢谢！那行得通