html - 根据活动更改文本使用 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;
 }
 );

标签： htmljquerytwitter-bootstrap-3

Answer 1

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

演示代码：

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