Twitter Bootstrap은 li에 활성 클래스를 추가합니다.

Twitter Bootstrap은 li에 활성 클래스를 추가합니다.

---

트위터 부트 스트랩을 사용하고 메인 탐색의 li 부분에 대한 활성 클래스를 시작해야합니다. 자동으로. 우리는 루비가 아닌 PHP를 사용합니다.

샘플 탐색 :

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/forums">Forums</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/faqs.php">FAQ's</a></li>
    <li><a href="/item.php">Item</a></li>
    <li><a href="/create.php">Create</a></li>
</ul>

부트 스트랩 코드는 다음과 같습니다.

<li class="active"><a href="/">Home</a></li>

따라서 현재 페이지에 활성 클래스를 추가하는 방법을 알아 내면됩니다. 진정한 기쁨없이 Stack의 거의 모든 답변을 살펴 보았습니다.

나는 이것을 가지고 놀았다 :

/*menu handler*/
$(function(){
    var url = window.location.pathname;  
    var activePage = url.substring(url.lastIndexOf('/')+1);
    $('.nav li a').each(function(){  
        var currentPage = this.href.substring(this.href.lastIndexOf('/')+1);

        if (activePage == currentPage) {
            $(this).parent().addClass('active'); 
        } 
    });
})

그러나 기쁨은 없습니다.

---

부트 스트랩 3 :

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

최신 정보

부트 스트랩 4 :

var url = window.location;
// Will only work if string in href matches with location
$('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.navbar-nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

---

우리는 결국 수정했습니다.

/*menu handler*/
$(function(){
  function stripTrailingSlash(str) {
    if(str.substr(-1) == '/') {
      return str.substr(0, str.length - 1);
    }
    return str;
  }

  var url = window.location.pathname;  
  var activePage = stripTrailingSlash(url);

  $('.nav li a').each(function(){  
    var currentPage = stripTrailingSlash($(this).attr('href'));

    if (activePage == currentPage) {
      $(this).parent().addClass('active'); 
    } 
  });
});

---

Bootstrap에는 실제로 JavaScript가 필요하지 않습니다.

 <ul class="nav">
     <li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
     <li><a data-target="#" data-toggle="pill" href="#users">Users</a></li>
 </ul>

메뉴 항목을 선택한 후 더 많은 작업을 수행하려면 여기에 다른 게시물에서 설명한대로 JS가 필요합니다.

도움이 되었기를 바랍니다.

---

당신이 넣으면

data-toggle="pill"

태그에서 자동으로 작동합니다.

http://twitter.github.com/bootstrap/javascript.html#tabs

마크 업에서 읽기

---

이것은 활성 메인 드롭 다운 과 활성 어린이를 포함하여 나를 위해 일했습니다 (422 덕분에).

$(document).ready(function () {
    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function () {
        return this.href == url;
    }).parent().addClass('active').parent().parent().addClass('active');
});

---

경로 및 작업과 함께 MVC 프레임 워크를 사용하는 경우 :

$(document).ready(function () {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

Christian Landgren의 답변에 설명 된대로 : https://stackoverflow.com/a/13375529/101662

---

이 시도.

// Remove active for all items.
$('.page-sidebar-menu li').removeClass('active');

// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');

// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active');

---

이것은 나를 위해 잘 작동합니다. 간단한 탐색 요소와 드롭 다운 탐색 요소를 모두 활성으로 표시합니다.

$(document).ready(function () {
   var url = window.location;

   $('ul.nav a[href="' + this.location.pathname + '"]').parent().addClass('active');

   $('ul.nav a').filter(function() {
      return this.href == url;
   }).parent().parent().parent().addClass('active');
});

마크에 전달 this.location.pathname하는 $('ul.nav a[href="'...'"]')것도 간단한 탐색 요소입니다. 통과 url는 나를 위해 작동하지 않았습니다.

---

Angulajs에서 Boostrap을 사용하는 경우 : 이것은 저에게 적합한 간단한 지시문입니다 (Kam이 인용 한 데이터 토글은 Angular-ui에 포함되어 있지 않기 때문입니다). 희망이 도움이 될 수 있습니다.

app.directive("myDataToggle", function(){
    function link(scope, element, attrs) {
        var e = angular.element(element);
        e.on('click', function(){
            e.parent().parent().children().removeClass('active');
            e.parent().addClass("active");
        })
    }
    return {
        restrict: 'A',
        link: link
    };
});

---

<ul class="nav nav-sidebar">
    <li><a href="#/page1" my-data-toggle>Page1</a></li>
    <li><a href="#/page2" my-data-toggle>Page2</a></li>
    <li><a href="#/page3" my-data-toggle>Page3</a></li>
</ul>

---

솔루션은 간단하며 서버 측이나 ajax가 필요하지 않으며 jQuery와 Bootstrap 만 있으면됩니다. 모든 페이지 id에서 body태그에 를 추가하십시오 . 이를 사용 id하여 페이지 이름 (태그 값)이 포함 된 태그를 찾습니다.

예:

page1.html

<body id="page1">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

page2.html

<body id="page2">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

script.js

<script>
    $(function () {
        $("#page1 a:contains('Page1')").parent().addClass('active');
        $("#page2 a:contains('Page2')").parent().addClass('active');
     });
</script>

Ben에게 감사합니다! 유튜브

---

부트 스트랩 4의 경우 드문 경우에 허용되는 답변에 문제가 있습니다. 다음과 같은 상대 경로에 대한 솔루션을 사용하기 위해 :

<ul class="navbar-nav nav-t">
   <li class="nav-item"><a href="index.php" class="nav-link">Home</a></li>
   <li class="nav-item"><a href="about.php" class="nav-link">About</a></li>
   <li class="nav-item"><a href="blog.php" class="nav-link">Blog</a></li>
   <li class="nav-item"><a href="info.php" class="nav-link">Info</a></li>
</ul>

그러면 다음에 대한 코드를 알 수 있습니다.

 if (activePage == currentPage) {
      $(this).parent().addClass('active'); 
    } 

활성 페이지는 전체 URL을 반환하고 현재 위치는 현재 href DOM 요소 값인 filename.php를 반환합니다. 이 문제를 해결하려면이 문제를 해결하는 방법을 추가하여 코드를 약간 수정하십시오.

//... other js/jquery code
var activeMenuItemChanges=function () {
    function stripTrailingSlash(str) {
        if(str.substr(-1)=='/'){
            return str.substr(0, str.length -1);
        }
        return str;
    }
    // for cases where we do not use full url but relative file names in the href of ul>li>a tags:
    function getRelativeFileName(str){
        let page=str.substr(str.lastIndexOf('/')+1);
        if(page.length > 0){
            return page;
        }
        return 'index'|'index.php';
    }

    let url=window.location.pathname;

    let activeLocation=stripTrailingSlash(url);

    let activeFileName=getRelativeFileName(activeLocation);

    $('.nav-item a').each(function() {
        let currentLocation=stripTrailingSlash($(this).attr('href'));
        if(activeFileName==currentLocation){
            $(this).parent().addClass('active');
        }
    });
}
activeMenuItemChanges();

//... other js/jquery code

---

다음은 완전한 Twitter 부트 스트랩 예제와 쿼리 문자열을 기반으로 적용된 활성 클래스입니다.

올바른 솔루션을 얻기 위해 따라야 할 몇 가지 단계 :

1) 최신 jquery.js 및 bootstrap.js javascript 파일을 포함합니다.

2) 최신 bootstrap.css 파일 포함

3) js에서 쿼리 문자열 변수 값을 가져 오기 위해 querystring-0.9.0.js를 포함하십시오.

4) HTML :

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active">
          <a href="#?page=0">
            Home
          </a>
        </li>
        <li>
          <a href="#?page=1">
            Forums
          </a>
        </li>
        <li>
          <a href="#?page=2">
            Blog
          </a>
        </li>
        <li>
          <a href="#?page=3">
            FAQ's
          </a>
        </li>
        <li>
          <a href="#?page=4">
            Item
          </a>
        </li>
        <li>
          <a href="#?page=5">
            Create
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

스크립트 태그의 JQuery :

$(function() {
    $(".nav li").click(function() {
        $(".nav li").removeClass('active');
        setTimeout(function() {
            var page = $.QueryString("page");
            $(".nav li:eq(" + page + ")").addClass("active");
        }, 300);

    });
});

완전한 빈을 완료 했으므로 여기를 클릭하십시오 http://codebins.com/bin/4ldqpaf

---

이것들 중 어느 것도 나를 위해 일하지 않았습니다. 내 부트 스트랩 설정은 별도의 페이지로 이동하고 (클릭 작업에서는 수행 할 수 없지만 새 페이지 탐색에서 활성 클래스가 제거됨) 내 URL이 정확히 일치하지 않습니다. 그래서 예외 기반 상황에 따라 제가 한 일이 있습니다. 다른 사람들에게 도움이되기를 바랍니다.

//Adding the active class to Twitter bootstrap navs, with a few alternate approaches

$(document).ready(function() {
  var rawhref = window.location.href; //raw current url 
  var newpage = ((window.location.href.match(/([^\/]*)\/?$/)[1]).substring(1)); //take only the last part of the url, and chop off the first char (substring), since the contains method below is case-sensitive. Don't need to do this if they match exactly.
  if (newpage == 'someNonMatchingURL') {  //deal with an exception literally
    newpage = 'matchingNavbarText'
    }
  if (rawhref.indexOf('somePartofURL') != -1) { //look for a consistent part of the path in the raw url to deal with variable urls, etc.
    newpage = "moreMatchingNavbarText"
    }
  $(".nav li a:contains('" + newpage + "')").parent().addClass('active'); //add the active class. Note that the contains method requires the goofy quote syntax to insert a variable.

});

---

URL에 매개 변수가 있어도 메뉴와 하위 메뉴를 활성화하려면 다음 코드를 사용하십시오.

// Highlight the active menu
$(document).ready(function () {
    var action = window.location.pathname.split('/')[1];

    // If there's no action, highlight the first menu item
    if (action == "") {
        $('ul.nav li:first').addClass('active');
    } else {
        // Highlight current menu
        $('ul.nav a[href="/' + action + '"]').parent().addClass('active');

        // Highlight parent menu item
        $('ul.nav a[href="/' + action + '"]').parents('li').addClass('active');
    }
});

다음과 같은 URL을 허용합니다.

/ posts
/ posts / 1
/ posts / 1 / edit

---

I had the same problem, and this is what I added in my app launch script, and it worked smoothly. Here is the javascript

$(document).ready(function($){
  var navs = $('nav > ul.nav');

  // Add class .active to current link
  navs.find('a').each(function(){

    var cUrl = String(window.location).split('?')[0];
    if (cUrl.substr(cUrl.length - 1) === '#') {
      cUrl = cUrl.slice(0,-1);
    }

    if ($($(this))[0].href===cUrl) {
      $(this).addClass('active');

      $(this).parents('ul').add(this).each(function(){
        $(this).parent().addClass('open');
      });
    }
  });
});

And the corresponding HTML is shown below. I'm using CoreUI, a phenomenal open source admin template and has support for many front end frameworks like Angular, plain bootstrap, Angular 4 etc.

<div class="sidebar">
<nav class="sidebar-nav open" >
    <ul class="nav" id="navTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link"    href="/summary"><i class="icon-speedometer"></i> Dashboard </a>
        </li>
        <li class="nav-item">
            <a class="nav-link"    href="/balanceSheet"><i class="icon-chart"></i> Balance Sheet </a>
        </li>
        <li class="divider"></li>
        <li class="nav-title border-bottom">
            <p class="h5 mb-0">
                <i class="icon-graph"></i> Assets
            </p>
        </li>
     </ul>
  </nav>
</div>

---

$(function() {
// Highlight the active nav link.
var url = window.location.pathname;
var filename = url.substr(url.lastIndexOf('/') + 1);
$('.navbar a[href$="' + filename + '"]').parent().addClass("active");

});

For more details Click Here!

ReferenceURL : https://stackoverflow.com/questions/11533542/twitter-bootstrap-add-active-class-to-li