별도의 메뉴 파일을 사용하는 클래스에서 활성화 설정

그래서 부트 스트랩 메뉴의 목록 항목에 "활성"클래스를 설정하려고합니다. 내 메뉴 파일을 다른 모든 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 스크립트 태그의 맨 위에 코드를 추가하는 것은 모든 종류의 결과를 얻는 유일한 방법이었습니다.

도움을 주시면 감사하겠습니다. 편집

: 탐색 메뉴의 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 코드는

가 가 페이지가 페이지로의 링크를로드하는 JS 코드 (또한 about.html 기본로드

입니다

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

때입니다 로드)

//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"); 
    }); 
});

I는 단지 예 #work 각 ID의 마지막 글 링크와 연결된 "F"에 대해 동일한 코드 바닥 글 #workf이다 중복이다.

같은 해결책을 찾고있는 사람이라면 누구나 충분히 명확 해지기를 바랍니다.

출처

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

죄송하지만 같은 결과가 나옵니다. –

별도의 메뉴 파일을 사용하는 클래스에서 활성화 설정

답변

관련 문제