2016-03-05 94 views
0

我想根据导航中的当前活动项目动态更改我的响应菜单的标题(我正在使用下拉菜单)。我已经有bootstrap scrollspy实现了,我只想要与我的标题相同的激活导航项。我需要一种方式来获得当前活动的导航,然后用它来改变HTML文本的电流id内如何动态更改响应菜单标题?

<div class="menu toggle-menu"> 
           <ul> 
            <li id="current">Menu</li> 
           </ul> 

         </div> 
         </div> 

        </div> 
       </div> 
      </div> 

      <div class="main-navigation responsive-menu"> 
       <ul class="navigation"> 
       <li><a class="toggle-menu" href="#home">Home</a></li> 
       <li><a class="toggle-menu" href="#manf">Manufactory</a></li> 
       <li><a class="toggle-menu" href="#dist">Distribution</a></li> 
       <li><a class="toggle-menu" href="#partner">Partner Brands</a></li> 
       <li><a class="toggle-menu" href="#barshala">BarShala</a></li> 



       <li><a class="toggle-menu" href="#top" style="margin-top:30px">Team</a></li> 
       <li><a class="toggle-menu" href="#career">Careers</a></li> 
       <li><a class="toggle-menu" href="#contact">Contact Us</a></li> 

      </ul> 
      </div> 

回答

1

可以类似JQuery的事件添加到下面更改标题。

$('.responsive-menu').on('activate.bs.scrollspy', function() { 
    var x = $("#navigation li.active > a").text(); 
    $("#current").html(x); // for changing the title of navbar 
})