3

まず第一に、私はオンラインでそれについて多くのことを読み、適切に実装できないことがわかったすべてのソリューション、いくつかの問題を修復したが、他の問題を作成したことを言いたかった. もう1つのことは、評判が低い（noob）ため、他の投稿にコメントできないことです。それができれば、新しい質問を投稿することはありません。

Web サイトの各部分に異なるページを持つナビゲーション バーを備えた Web サイトを作成しています: Home.html、AboutUs.html...

ナビゲーションバーを実装しましたが、ナビゲーションバーの同じコードを各ページに貼り付けるのは良い解決策ではないと思うので、最適化する方法を探しました。

今のところ、別のサイト (Navbar.html) を作成し、それを他のページに追加したところ、見栄えがよくなりました。

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

そして体内：

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

「アクティブな」クラスを自動化しようとしたときに問題が発生しました。そのために、 data-toggle='tab' と data-toggle='pill' の両方を試しましたが、どちらの場合もアクティブは変更されましたが、ボタンをクリックしても Web サイトは変更されませんでした。コードがあります：

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

また、.js ファイルを使用してリダイレクトしようとしました。

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

それは完全に機能し、ボタンをクリックするとページが変更されましたが、下にスクロールすると、変更中のページの下に常に開いた最初のページがあることがわかりました。（これを説明するのは難しいです、あなたが理解してくれることを願っています）

また、オンラインで見つけた多くの機能を追加しようとしましたが、それらが機能しているかどうかはよくわかりませんでした。それらを正しく、または間違った場所に実装していないと思います。私はhtmlの初心者です。関数を呼び出す方法がよくわかりません:S 例:

    $(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);
        });
    });

とにかく私はそれを行うことができますか、または各ページの「アクティブな」クラスを自動化する別の方法はありますか?

お時間をいただきありがとうございます

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 に答える