<li> 使用 jquery 根据活动状态更改文本

Question

我正试图根据其子项的活动<li>值更改锚点下拉标记的文本。我使用的堆栈是Bootstrap 3和Jquery 3.2

例如，如果这是当前活动的li标签：

<li>
<a href="#apresentacao" data-toggle="tab">
<h1 class="mobile-tab-text">Apresentação</h1>
</a>
</li>

以下代码的内容应为"apresentacao">

<a class="dropdown-toggle tab-ativa-mobile" data-toggle="dropdown" href="#">
Apresentacao
</a>

这是完整的下拉代码：

<li class="dropdown visible-xs-block">
<a class="dropdown-toggle tab-ativa-mobile" data-toggle="dropdown" href="#">
selected title
</a>
<ul class="dropdown-menu" id="collapsed">
<li>
<a href="#apresentacao" data-toggle="tab">
<h1 class="mobile-tab-text">Apresentação</h1>
</a>
</li>
<li>
<a href="#professores" data-toggle="tab">
<h1 class="mobile-tab-text">Apresentação</h1>
</a>
</li>
<li><a href="#tab5" data-toggle="tab">Tab5</a></li>
</ul>
</li>

到目前为止，我已经尝试过了，但没有成功：

$('.tab-ativa-mobile').text(()=>{
var tabMobile = $('li.active > a > h1.mobile-tab-text').text();
return 'ss' + tabMobile;
}
);

Answer 1

您可以使用onclick事件，因此每当单击li时，只需获取.mobile-tab-text值，并使用.text()将其设置为您的tab-ativa-mobile。

演示代码 :

//li clicked
$(".dropdown-menu li").on("click", function() {
$('.tab-ativa-mobile').text($(this).find("h1.mobile-tab-text").text()) //set text 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul>
<li class="dropdown visible-xs-block">
<a class="dropdown-toggle tab-ativa-mobile" data-toggle="dropdown" href="#">
selected title
</a>
<ul class="dropdown-menu" id="collapsed">
<li>
<a href="#apresentacao" data-toggle="tab">
<h1 class="mobile-tab-text">Apresentação1</h1>
</a>
</li>
<li>
<a href="#professores" data-toggle="tab">
<h1 class="mobile-tab-text">Apresentação2</h1>
</a>
</li>
<li>
<a href="#tab5" data-toggle="tab">
<h1 class="mobile-tab-text">tab5</h1>
</a>
</li>
</ul>
</li>
</ul>

Answer 2

对于第一次加载，我不知道你想显示的第一个标题是什么。所以我假设你的第一份菜单是标题。第二，我不知道在下拉菜单中添加active类的事件是什么，所以我假设如果有人点击了它。

<script>$(document).ready(function(){
var a = $('ul.dropdown-menu li:first-child a');
func(a);
$(document).on('click', 'ul.dropdown-menu li a', function(){
func($(this));
});
});
function func(a){
$('ul.dropdown-menu li').removeClass('active');
a.addClass('active');
$('.tab-ativa-mobile').text(a.children('h1').text());
}
</script>

如果您想通过滚动更改下拉按钮的锚点标题，可以使用事件scroll希望你喜欢。