我不知道如何为这个问题设置一个标题。
我想要的是用单击的标记的内容更改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/
如下所示更新您的click事件;
null
$(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>