更改与活动链接文本的跨度文本

Question

我一直在试图找出迄今为止没有成功的这个问题，我不知道jquery所以任何帮助，不胜感激。我使用引导来建立我的网页，我的侧栏变成了第二个移动菜单，它已经以我想要的方式显示，并且我还将活动类成功地添加到了我的网页，并且一次关闭菜单的功能一次从列表中选择一个项目，我无法完成的唯一事情是当我从列表中选择一项运动时，我希望标题跨度“Generales”将文本更改为活动链接文本，例如“足球”或当前活动链接。

我的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

试试这个：

$(".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>

Answer 2

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

所以：

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

Answer 3

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