個別のメニューファイルを持つクラスでアクティブに設定する

したがって、ブートストラップメニューからリスト項目に「アクティブ」クラスを設定しようとしています。私は自分のメニューファイルを他のすべてのHTMLファイルとは別に持っているので、私のサイト全体に複数のメニューコードを保持する必要はありません。私はメニューファイルをロードするためにjqueryを使用しています。個別のメニューファイルを持つクラスでアクティブに設定する

$(function() { 
    $("#MainMenu").load("menu.html"); 
});

メニューファイルの中に私はこのサイトの別の回答から得ました。それはhtmlファイルをロードしません仕事とのindex.htmlにとどまるんが

$("#myNavbar li").click(function (e) { 
    e.preventDefault(); 
    $('#myNavbar li').removeClass('active'); 
    $(this).addClass('active'); 
});

私はそれはhtmlファイルをロードしますが、それは

アクティブクラスを設定しません e.preventDefault();を削除し、 function()に function (e)を変更した場合

コードをメインのhtmlファイルに入れてみましたが、まったく動作しません。私は私のカスタムjsのすべてのための私の別々のJSファイルに入れてみましたし、それは動作しません。 menu.htmlのスクリプトタグの上部にコードを追加するだけで、あらゆる種類の結果を得ることができました。

ご協力いただければ幸いです。

EDIT：ナビゲーションメニューのHTMLコード

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">brand</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">About</a></li> 
     <li><a href="resume.html">Resume</a></li> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">Companies</a></li> 
     <li><a href="#">Blog</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

出典

2016-12-09 Zedd Almighty

あなたはあなたのHTMLを投稿できますか？ – Yaser

htmlのどの部分ですか？ –

をお勧めします、私は答えを考え出した、よく、仕事まわり。とにかく、コード管理の面でも優れていると思います。私はそれを後方に持っていた。私はすべてのページにメニューとフッタを挿入しようとしていました。私がしなければならないことは、メニューとフッターを含むインデックスページにリンクを挿入することです。いくつかのコードを変更した後、完全に動作します。この同じ質問、または問題がある可能性があります人のために、メニューのJSコードは

//Load MENU HTML file 
$(function() { 
    $("#myNavbar li").click(function (e) { 
     e.preventDefault(); 
     $('#myNavbar li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

あるページがあるときに、ページへのリンクをロードするためのjsのコードは（もabout.htmlをロードしますロードされた）私はちょうど#workはフッターの#workfあり、例えば、各IDの最後にフッタリンクと添付の「F」のための同じコードを重複

//MENU LINKS 
$(document).ready(function() { 
    $("#include").load("about.html"); 

    $("#about").on("click", function() { 
     $("#include").load("about.html"); 
    }); 
    $("#resume").on("click", function() { 
     $("#include").load("resume.html"); 
    }); 
    $("#work").on("click", function() { 
     $("#include").load("work.html"); 
    }); 
});

あります。

これは、同じ解決策を探している人にとっては十分だと思いますが。

出典

2016-12-09 21:39:08

Jsutは、この単純なexapmleを試してみてください...

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Nav Active</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
     </div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </nav> 

    <div class="container"> 
    <h3>Basic Navbar Example</h3> 
    <p>A navigation bar is a navigation header that is placed at the top of the page.</p> 
    </div> 

</body> 
</html> 
<script> 
    $(".nav a").on("click", function(){ 
    $(".nav").find(".active").removeClass("active"); 
    $(this).parent().addClass("active"); 
}); 
</script>

出典

2016-12-09 05:05:54

申し訳ありませんが、動作しません。 –

私は完全なコードをお待ちしております –

私は既に私がコードを持っているのと同じ結果を返します –

あなたはmenu.htmlがレンダリングされた後にクリック機能を追加する必要があります。あなたが好きな負荷のコールバック関数を使用することができます：あなたの条件に依存し

$("#MainMenu").load("menu.html", function() { 
    //this gets executed after the load has finished 
    $("#myNavbar li").click(function() { 
    $(this).removeClass('active'); 
    $(this).addClass('active'); 
    }); 
});

注意を、あなたは/の代わりにあなたのremoveClassのtoggleClassを見てaddClass

出典

2016-12-09 07:19:59

申し訳ありませんが、私には同じ結果が得られます。 –

個別のメニューファイルを持つクラスでアクティブに設定する

答えて

関連する問題