使用 jquery 根据活动 <li> 更改文本答案

【问题标题】：Change text according to active <li> using jquery使用 jquery 根据活动 <li> 更改文本
【发布时间】：2023-03-25 03:57:01
【问题描述】：

我正在尝试根据其子项的活动<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;
 }
 );

【问题讨论】：

标签： html jquery twitter-bootstrap-3

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

【讨论】：

嘿，斯瓦蒂！非常感谢，你帮了我很多！！！
很高兴帮助您可以通过单击刻度线将此答案设置为已接受:)。

【解决方案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 希望你喜欢。

【讨论】：