부트 스트랩 navbar 활성 상태가 작동하지 않음
부트 스트랩 v3이 있습니다.
나는를 사용하여 class="active"내에서 navbar내가 메뉴 항목을 누르면이 전환되지 않습니다. 이 작업을 수행 jQuery하고 클릭 기능을 구축하는 방법을 알고 있지만이 기능이 부트 스트랩에 포함되어야한다고 생각합니까? 그렇다면 JavaScript 문제일까요?
다음은 포함 된 js / css / bootstrap 파일이있는 헤더입니다.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />
<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>
내 navbar코드 는 다음과 같습니다 .
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.php">MyBrand</a>
</div>
<div class="collapse navbar-collapse navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="/index.php">Home</a>
</li>
<li>
<a href="/index2.php"> Links</a>
</li>
<li>
<a href="/history.php">About</a>
</li>
<li>
<a href="/contact.php">Contact</a>
</li>
<li>
<a href="/login.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
내가 올바르게 설정하고 있습니까?
(관련이없는 메모이지만 관련이있을 수 있습니까? 메뉴가 이동 될 때 메뉴 버튼을 클릭하면 축소됩니다. 다시 누르면 축소되지 않습니다. 따라서이 문제는. 다른 쪽에서는 둘 다 잘못된 JavaScript 설정을 의미합니다. 혹시?)
문서에 다음과 같이 명시되어있는 동안 축소 된 부트 스트랩 js 파일 및 축소 / 전환 플러그인을 포함했습니다.
bootstrap.js와 bootstrap.min.js는 모두 단일 파일에 모든 플러그인을 포함합니다.
하나만 포함하십시오.
과
간단한 전환 효과의 경우 다른 JS 파일과 함께 transition.js를 한 번 포함합니다. 컴파일 된 (또는 축소 된) bootstrap.js를 사용하는 경우이를 포함 할 필요가 없습니다. 이미 포함되어 있습니다.
따라서 최소화 문제에 대한 문제가 될 수 있습니다.
활성 클래스의 경우 직접 관리해야하지만 한두 줄이면됩니다.
부트 스트랩 3 :
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
Bootply : http://www.bootply.com/IsRfOyf0f9
부트 스트랩 4 :
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
다음은 활성 페이지 전환을위한 솔루션이었습니다.
$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});
이것은 나를 위해 완벽하게 작동합니다. "window.location.pathname"도 실제 페이지 이름 앞에 데이터를 포함합니다 (예 : directory / page.php). 따라서 실제 navbar 링크는 URL에이 링크가 포함 된 경우에만 활성화됩니다.
$(document).ready(function() {
// -----------------------------------------------------------------------
$.each($('#navbar').find('li'), function() {
$(this).toggleClass('active',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
// -----------------------------------------------------------------------
});
3.3.4 버전의 부트 스트랩을 사용하면 긴 html 페이지에서 pg의 섹션을 참조 할 수 있습니다. body 요소로 spy-scroll로 활성 navbar 링크를 관리하려면 클래스 또는 ID별로 :
<body data-spy="scroll" data-target="spy-scroll-id">
데이터 타겟은 id = "spy-scroll-id"인 div가됩니다.
<div id="spy-scroll-id" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#topContainer">Home</a></li>
<li><a href="#details">About</a></li>
<li><a href="#carousel-container">SlideShow</a></li>
</ul>
</div>
이렇게하면 자바 스크립트 기능없이 클릭하여 링크를 활성화해야하며 js onclick ()이 수행하지 않는 페이지의 해당 링크 섹션을 스크롤 할 때 각 링크도 자동으로 활성화됩니다.
앵커 링크를 사용하지 않는 경우 다음과 같이 사용할 수 있습니다.
$(document).ready(function () {
$.each($('#navbar').find('li'), function() {
$(this).toggleClass('active',
'/' + $(this).find('a').attr('href') == window.location.pathname);
});
});
다음 과 같이 부트 스트랩 내비게이션 내 링크 에 data-toggle = "tab" 을 추가 하기 만하면됩니다 .
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#">Home</a></li>
<li><a data-toggle="tab" href="#">Test</a></li>
<li><a data-toggle="tab" href="#">Test2</a></li>
</ul>
Bootstrap 4를 사용하면 다음을 사용할 수 있습니다.
$(document).ready(function() {
$(document).on('click', '.nav-item a', function (e) {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
이 우아한 솔루션이 나를 위해 트릭을 수행했습니다. 새로운 아이디어 / 제안을 환영합니다.
$( document ).on( 'click', '.nav-list li', function ( e ) {
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );
jQuery의 "siblings ()"메소드를 사용하여 액세스 된 항목 만 활성 상태로 유지하고 형제 항목은 비활성 상태로 유지할 수 있습니다.
나는 오늘 이것으로 어려움을 겪고 있는데, 데이터 토글은 단일 페이지 응용 프로그램에서만 작동했습니다.
나는 실제로 다른 페이지에 대한 게시물 요청을하고있는 콘텐츠를로드하기 위해 ajax를 사용하지 않고 있으므로 첫 번째 js 스크립트도 쓸모가 없었습니다. 이 줄로 해결합니다.
var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
이 문제를 해결하는 데 도움이되기를 바랍니다.
var navlnks = document.querySelectorAll(".nav a");
Array.prototype.map.call(navlnks, function(item) {
item.addEventListener("click", function(e) {
var navlnks = document.querySelectorAll(".nav a");
Array.prototype.map.call(navlnks, function(item) {
if (item.parentNode.className == "active" || item.parentNode.className == "active open" ) {
item.parentNode.className = "";
}
});
e.currentTarget.parentNode.className = "active";
});
});
동적으로 생성 된 목록 항목 인 WordPress Stack을 사용하여 약간의 고통이있었습니다.
이것을 추가하고 작동했습니다.
$(document).ready(function () {
$(".current-menu-item").addClass("active");
});
즉석에서 할 것입니다.
클래스 "활성"은 부트 스트랩으로 즉시 관리되지 않습니다. 귀하의 경우 PHP를 사용하고 있으므로 다음을 볼 수 있습니다.
PHP로 HTML 메뉴에 class = 'active'를 추가하는 방법
대부분 자동화하는 방법을 지원합니다.
항목을 클릭 한 후 부트 스트랩 모바일 메뉴 축소 해제의 경우 다음을 사용할 수 있습니다.
$("ul.nav.navbar-nav li a").click(function() {
$(".navbar-collapse").removeClass("in");
});
부트 스트랩 베어 테마를 사용하고 있습니다. 여기 샘플 navbar 코드가 있습니다. 요소의 클래스 이름-> .nav- 이것은 자바 스크립트에서 참조됩니다.
/ Collect the nav links, forms, and other content for toggling
#bs-example-navbar-collapse-1.collapse.navbar-collapse
%ul.nav.navbar-nav
%li
%a{:href => "/demo/one"} Page One
%li
%a{:href => "/demo/two"} Page Two
%li
%a{:href => "/demo/three"} Page Three
보기 페이지 (또는 부분)에서 다음을 추가하십시오. : javascript, 페이지가로드 될 때마다 실행되어야합니다.
haml보기 스 니펫->
- content_for :javascript do
:javascript
$(function () {
$.each($('.nav').find('li'), function() {
$(this).toggleClass('active',
$(this).find('a').attr('href') == window.location.pathname);
});
});
자바 스크립트 디버거에서 'href'속성 값이 window.location.pathname과 일치하는지 확인하세요. 이것은 내 문제를 해결하는 데 도움이 된 @Zitrax의 솔루션과 약간 다릅니다.
의 경우 다음 과 같은 함수와 함께 AngularJS사용할 수 있습니다 ng-class.
HTML->
<nav class="navbar navbar-default" ng-controller="NavCtrl as vm">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li ng-class="vm.Helper.UpdateTabActive('Home')"><a href="#" ng-click>Home</a></li>
<li ng-class="vm.Helper.UpdateTabActive('About')"><a href="#about">About</a></li>
<li ng-class="vm.Helper.UpdateTabActive('Contact')"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
그리고 컨트롤러
app.controller('NavCtrl', ['$scope', function($scope) {
var vm = this;
vm.Helper = {
UpdateTabActive: function(sTab){
return window.location.hash && window.location.hash.toLowerCase() == ("#/" + sTab).toLowerCase() ? 'active' : '';
}
}
}]);
$ location을 사용하는 경우 해시가 없습니다. 따라서 $ location을 사용하여 URL에서 필요한 문자열을 추출 할 수 있습니다.
다음은 모든 경우에 작동하지 않습니다->
다음과 같은 범위 변수를 사용하면 클릭 한 경우에만 작동하지만 $state.transitionTo또는 window.location을 사용하여 전환 하거나 URL을 수동으로 업데이트하면 Tab 값이 업데이트되지 않습니다.
<ul class="nav navbar-nav" ng-init="Tab='Home'">
<li ng-class="Tab == 'Home' ? 'active' : ''"><a href="#" ng-click="Tab = 'Home'">Home</a></li>
<li ng-class="Tab == 'About' ? 'active' : ''"><a href="#" ng-click="Tab = 'About'">About</a></li>
</ul>
이 JavaScript를 기본 js 파일에 추가하십시오.
$(".navbar a").on("click", function(){
$(".navbar").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
내 파일 이름이 내 탐색 모음 제목과 같지 않기 때문에 한 단계 더 나아가 야했습니다. 즉, 내 첫 번째 탐색 모음 링크는 HOME이지만 파일 이름은 index ..
따라서 경로 이름을 잡고 일치하십시오.
분명히 이것은 조잡한 예이며 더 효율적일 수 있지만 매우 사용자 정의 요구 사항입니다.
var loc_path = location.pathname;
$('li.active').removeClass('active');
if(loc_path.includes('index')){
$('li :eq(0)').addClass('active');
}else if(loc_path.includes('blog')){
$('li :eq(2)').addClass('active');
}else if(loc_path.includes('news')){
$('li :eq(3)').addClass('active');
}else if(loc_path.includes('house')){
$('li :eq(4)').addClass('active');
}
나를 위해 일한 Bootstrap 4 솔루션 :
$(document).ready(function() {
//You can name this function anything you like
function activePage(){
//When user lands on your website location.pathname is equal to "/" and in
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
var currentPage = location.pathname;
var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
$('.nav-link').removeClass('active');
$('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
if (location.pathname == "/") {
$('a[href*="index"]').closest('li').addClass('active');
}
}
//Invoke function
activePage();
});
이것은 href 에 location.pathname이 포함 된 경우에만 작동합니다 !
If you are testing your site on your own pc (using wamp, xampp, lamp, etc...) and your site is located in some subfolder then your path is actually "/somefolder/something.php", so don't get confused.
I would suggest if you are unsure to use following code so you can make sure what is the correct location.pathname:
$(document).ready(function() {
alert(location.pathname);
});
the next answer is for those who have a multi-level menu:
var url = window.location.href;
var els = document.querySelectorAll(".dropdown-menu a");
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
if (el.href === url) {
el.classList.add("active");
var parent = el.closest(".main-nav"); // add this class for the top level "li" to get easy the parent
parent.classList.add("active");
}
}
As someone who doesn't know javascript, here's a PHP method that works for me and is easy to understand. My whole navbar is in a PHP function that is in a file of common components I include from my pages. So for example in my 'index.php' page I have... `
<?php
$calling_file = basename(__FILE__);
include 'my_common_includes.php'; // Going to use my navbar function "my_navbar"
my_navbar($calling_file); // Call the navbar function
?>
Then in the 'my_common_includes.php' I have...
<?php
function my_navbar($calling_file)
{
// All your usual nabvbar code here up to the menu items
if ($calling_file=="index.php") { echo '<li class="nav-item active">'; } else { echo '<li class="nav-item">'; }
echo '<a class="nav-link" href="index.php">Home</a>
</li>';
if ($calling_file=="about.php") { echo '<li class="nav-item active">'; } else { echo '<li class="nav-item">'; }
echo '<a class="nav-link" href="about.php">About</a>
</li>';
if ($calling_file=="galleries.php") { echo '<li class="nav-item active">'; } else { echo '<li class="nav-item">'; }
echo '<a class="nav-link" href="galleries.php">Galleries</a>
</li>';
// etc for the rest of the menu items and closing out the navbar
}
?>
Bootstrap 4 requires you to target the li item for active classes. In order to do that you have to find the parent of the a. The 'hitbox' of the a is as big as the li but due to bubbeling of event in JS it will give you back the a event. So you have to manually add it to its parent.
//set active navigation after click
$(".nav-link").on("click", (event) => {
$(".navbar-nav").find(".active").removeClass('active');
$(event.target).parent().addClass('active');
});
참고URL : https://stackoverflow.com/questions/24514717/bootstrap-navbar-active-state-not-working
'program story' 카테고리의 다른 글
| Xcode 8에서 줄 삭제 키보드 단축키를 어떻게 만듭니 까? (0) | 2020.10.13 |
|---|---|
| LINQ를 사용하여 항목을 목록 맨 위로 이동 (0) | 2020.10.13 |
| 값이 숫자인지 어떻게 확인할 수 있습니까? (0) | 2020.10.13 |
| 익명 메서드로 값을 반환하는 방법은 무엇입니까? (0) | 2020.10.12 |
| 마지막 마이그레이션 추가 명령을 실행 취소하려면 어떻게합니까? (0) | 2020.10.12 |