Question

我正在创建视差网页

我想点击

<li class="active">

激活并让其他人不活跃。而我只是不知道该怎么做。我正在使用twitter bootstrap进行导航

<ul class="nav navbar-nav navbar-navi">
   <li class="active"><a href="#home" class="scroll">Home</a></li>
   <li><a href="#about" class="scroll">About</a></li>
   <li><a href="#" class="scroll">Works</a></li>
   <li><a href="#" class="scroll">Services</a></li>
   <li><a href="#" class="scroll">Stats</a></li>
   <li><a href="#" class="scroll">Team</a></li>
   <li><a href="#" class="scroll">Contact</a></li>
</ul>

CSS

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
 {
   color: #B38441;
   background-color:transparent;
 }

Js我用于平滑滚动

 $(".scroll").click(function(event){
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     $('html,body').animate({scrollTop:dest}, 1500,'swing');
 });

Answer 1

$('.nav').click(function(){
    $('.nav').removeClass('active');
    $(this).addClass('active');
});

Answer 2

在点击功能中添加以下两行

$(".scroll").parent().toggleClass("active", false);
$(this).parent().toggleClass("active", true);

第一行从所有active元素中删除了类li。第二个将active添加回点击的a元素的父= li。

Answer 3

Add following script your page
<script type="text/javascript">
    $('document').ready(function (){
        $('.liactive').click(function (){
            $('.liactive').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

You can add class and id in every li tag, like following.

    <ul class="nav navbar-nav navbar-navi">
    <li class="active liactive"><a href="#home" class="scroll">Home</a></li>
    <li class="liactive" id="about"><a href="#about" class="scroll">About</a></li>
    <li class="liactive" id="work"><a href="#" class="scroll">Works</a></li>
    <li class="liactive" id="services"><a href="#" class="scroll">Services</a></li>
    <li class="liactive" id="stats"><a href="#" class="scroll">Stats</a></li>
    <li class="liactive" id="team"><a href="#" class="scroll">Team</a></li>
    <li class="liactive" id="contact"><a href="#" class="scroll">Contact</a></li>
</ul>

Answer 4

这是解决方案......

HTML

<body data-spy="scroll" data-target="#navbar-example">
<div id="navbar-example">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand"href="#home">DANIEL <span class="brand">THE DEVELOPER</span></a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-navi">
          <li class="active"><a href="#home" class="scroll">Home</a></li>
          <li><a href="#about" class="scroll">About</a></li>
          <li><a href="#" class="scroll">Works</a></li>
          <li><a href="#" class="scroll">Services</a></li>
          <li><a href="#" class="scroll">Stats</a></li>
          <li><a href="#" class="scroll">Team</a></li>
          <li><a href="#" class="scroll">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

CSS

 body{
  position: relative;
 }

JS

 $('body').scrollspy({ target: '#navbar-example' })
 $('[data-spy="scroll"]').each(function () {
   var $spy = $(this).scrollspy('refresh')
 })

想要使当前的<li>活跃</li>

4 个答案: