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
'developer tip' 카테고리의 다른 글
iPhone HTML5 비디오 재생 버튼 숨기기 (0) | 2020.12.26 |
---|---|
서명하는 동안 오류가 발생했습니다. (0) | 2020.12.26 |
Java 개발자를위한 최고의 무료 Eclipse 플러그인은 무엇입니까? (0) | 2020.12.26 |
std :: is_struct 유형 특성이없는 이유는 무엇입니까? (0) | 2020.12.26 |
Mac 프롬프트 "권한이 거부되었습니다"에서 스크립트 실행 (0) | 2020.12.26 |