使用活动 link 文本更改跨度文本

Question

我一直在努力解决这个问题，但到目前为止没有成功，我不知道 jquery 所以任何帮助都将不胜感激。我正在使用 bootstrap 构建我的网页，我的侧边栏变成了第二个移动菜单，它已经按照我想要的方式显示，我还成功地将活动 class 添加到我的网页并且一个关闭菜单的功能，一旦我 select 列表中的一个项目，我唯一无法完成的是当我 select 列表中的一项运动时我想要标题跨度 "Generales"在这种情况下将文本更改为活动 link 文本 "Soccer" 或当前活动 link.

我的 HTML:

<div class="left-navigation">
  <button class="btn collapse-toggle visible-xs">
    <span class"menuTitle">Generales</span>
  </button>
  <div class="list-group-collapse" id="side-category-menu-collapse">
      <a href="#generales" class="list-group-item active">General</a>
      <a href="#soccer" class="list-group-item">Soccer</a>
      ><a href="#football" class="list-group-item">Football</a> 
      <a href="#baseball" class="list-group-item">Baseball</a> 
  </div>
</div>

Jquery 用于活动和折叠菜单：

$(document).ready(function() {
  $(".list-group-item").click(function () {
    $(".list-group-item").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active");   
  });
});
$(function(){ 
 var navMain = $(".list-group-collapse");
 navMain.on("click", "a:not([data-toggle])", null, function () {
     navMain.collapse('hide');
   });
});

Jquery 我试过用了，但一直没用:

$('.left-navigation a').click(function(){
    console.log('hiding');
    $('.menuTitle').click();
    var title=$(this).find(‘.list-group-item').html();
    console.log(title);
    $('.menuTitle').html(title);
});

这是我当前菜单的图像以及我要完成的任务：http://imgur.com/a/pxviG

对于任何语法错误提前道歉，因为英语不是我的第一语言

Answer 1

使用：$(this).text() 获取 link 文本。

所以：

$(‘.left-navigation a').click(function(){
    console.log('hiding');
    $('.menuTitle').click();
    var title=$(this).text();
    console.log(title);
    $('.menuTitle').html(title);
});

Answer 2

$(document).ready(function() {
  $(".list-group-item").click(function () {
    $(".list-group-item").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active");   

    $("span:first-child").text($(this).text());
     $("span:first-child").val($(this).text());
  });


});

https://jsfiddle.net/ayang10/DSGxz/1726/

Answer 3

试试这个：

  $(".list-group-item").click(function () {
    $(".list-group-item").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active"); 
    $("#selected-menu:first-child").text($(this).text());
   
  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="left-navigation">
  <button id="selected-menu" class="btn collapse-toggle ">
    <span class"menuTitle">Generales</span>
  </button>
  <div class="list-group-collapse" id="side-category-menu-collapse">
      <a href="#generales" class="list-group-item active">General</a>
      <a href="#soccer" class="list-group-item">Soccer</a>
      <a href="#football" class="list-group-item">Football</a> 
      <a href="#baseball" class="list-group-item">Baseball</a> 
  </div>
</div>

使用活动 link 文本更改跨度文本

Change span text with active link text

jquery

menu

function

responsive