Question

我正在单页网站上工作，我有以下导航栏：

<ul class="nav navbar-nav navbar-right">
    <li><i></i><a href="#home"  class="active">HOME</a></li>
    <li><i></i><a href="#accommadation" class="">Accommodation</a></li>
    <li><i></i><a href="#activities" class="">activities</a></li>
    <li><i></i><a href="#gallery" class="">>gallery</a></li>
    <li><i></i><a href="#contact" class="">>contact</a></li>   
</ul>

它在section标记中处理 section id 。像

<section id="home">
<section id="accommadation">

如何为导航提供class="active"？

Answer 1

试试这个

<ul class="nav navbar-nav navbar-right">
    <li><i></i><a href="#home"  class="nav_menu active">HOME</a></li>
    <li><i></i><a href="#accommadation" class="nav_menu ">Accommodation</a></li>
    <li><i></i><a href="#activities" class="nav_menu ">activities</a></li>
    <li><i></i><a href="#gallery" class="nav_menu ">>gallery</a></li>
    <li><i></i><a href="#contact" class="nav_menu ">>contact</a></li>   
</ul>
<script type="text/javascript">
    $(document).ready(function(){
        $('.nav_menu').click(function(){
            $('.nav_menu.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

Answer 2

它不依赖于Codeigniter或PHP，因为它是单页网站，你需要一些客户端javascript代码或使用jQuery，

$(function(){
    $('.navbar-nav a[href^=#]').on('click',function(e){
        $('.navbar-nav a.active').removeClass('active');
        $(this).addClass('active');
        // if you want some animation for the element to scroll then use animate()
        $('html,body').animate({scrollTop:$(this.href).offset().top},900);
    });
});

codeigniter，如何在单页网站中调用活动类到导航？

2 个答案: