3

Firs of all I wanted to say that I have read a lot about it online and all the solutions found I could not implement them properly, some repaired some problems but created others. Another thing is that I cannot comment on other posts because of low reputation (noob), if I could do that I would not be posting a new question.

I am creating a website with a navbar with different pages for each part of the website: Home.html, AboutUs.html...

I implemented the navbar, but I think is not a good solution to paste the same code of the navbar in each page so I looked for a way to optimizing it.

For now I created another site (Navbar.html) and added it into the other pages and it looks good:

<script>
    $(function(){
        $("#navbar").load("Navbar.html");
    });
</script>

and inside the body:

<div id="navbar"></div>

The problem occurred when trying to automatize the "active" class. For that I tried both data-toggle='tab' and data-toggle='pill' but in both cases the active changed but when clicking the button the webite didn't change. There is the code:

<ul class="nav navbar-nav" >
    <li class="menuText"><a href="Home.html" data-toggle="tab" >Home</a></li>
    <li class="menuText"><a href="AboutUs.html" data-toggle="tab" >About Us</a></li>
    <li class="menuText"><a href="Donate.html" data-toggle="tab" >Donate</a></li>
    <li class="menuText"><a href="Volunteer.html" data-toggle="tab" >Volunteer</a></li>
    <li class="menuText"><a href="Contact.html" data-toggle="tab" >Contact</a></li>
</ul>

I also tried redirecting it with a .js file:

$('#home').load('Home.html');
$('#aboutus').load('AboutUs.html');
$('#donate').load('Donate.html');
$('#volunteer').load('Volunteer.html');
$('#contact').load('Contact.html');

it worked perfectly and it changed pages when the button was clicked, but I found that if I scrolled down there was the first page I opened constantly there below the changing page. (hard to explain this, hope you understood)

I also tried adding lots of functions found online but I didn't really know if they were working. I think I didn't implemented them correctly or in the wrong place. I'm a noob in html. I don't really know how to call the function :S Example:

    $(function(){
        var hash = window.location.hash;
        hash && $('ul.nav a[href="Home.html"]').tab('show');

        $('.nav-tabs a').click(function (e) {
            $(this).tab('show');
            var scrollmem = $('body').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        });
    });

Is there anyway I can do it, or another way to automatize the "active" class in each page?

Thank you for your time

4

1 回答 1

1

这应该给你你想要的：

$(function() {
   var mynavbar = $("#navbar"); //cache it
   mynavbar.load("Navbar.html");
   // remove any current active if found in markup:
   mynavbar.find('ul.nav li').removeClass('active');

   var url = window.location;// get location

   // add the active class to current url detected href
   // Will work for absolute hrefs, might have to adjust for others
   mynavbar.find('ul.nav li').find('a').filter(function() {
      return (url.href.indexOf(this.href) != -1);
   }).parent().addClass('active');

  // put the click handler for the navigation in place
  mynavbar.on('click', 'ul.nav li', function() {
     var myhref = $(this).find('a').attr('href');
     // just for debug   alert("proceed to: " + myhref);
     window.location.href = myhref;
  });
});

注意：如果您只想使用当前页面，在散列区域加载内容，那就不同了。在这种情况下，您将需要重做并更改此行：

window.location.href = myhref;

例如： 

$('#mycontentcontainer').load(myhref);

如果您想使用选项卡式内容并仅在单击时加载内容，也可以这样做（但您说您想导航到新页面，所以我没有包括在内）

编辑：注意：展望未来，上面的解决方案load可能不适用于所有情况（加载缓慢）......所以改用这个：只在加载后处理`nav。

function addActiveNavbar(mynavbar) {
  // remove any current active if found in markup:
  mynavbar.find('ul.nav li').removeClass('active');
  var url = window.location; // get location
  // Will work for absolute hrefs, might have to adjust for others
  mynavbar.find('ul.nav li').find('a').filter(function() {
    return (url.href.indexOf(this.href) != -1);
  }).parent().addClass('active');
}
$(function() {
  var mynavbar = $("#navbar"); //cache it
  addActiveNavbar(mynavbar);
  $.get("Navbar.html")
    .done(function(data) {
      mynavbar.html(data);
      // add the active class to current url detected href
      addActiveNavbar(mynavbar);
    });
  // put the click handler for the navigation in place
  mynavbar.on('click', 'ul.nav li', function() {
    var myhref = $(this).find('a').attr('href');
    // un-comment for debug   alert("proceed to: " + myhref);
    window.location.href = myhref;
  });
});
于 2016-03-08T19:25:59.617 回答