ट्विटर बूटस्ट्रैप सक्रिय वर्ग को ली

Question

ट्विटर बूटस्ट्रैप का उपयोग करके, और मुझे मुख्य नौसेना के ली भाग में सक्रिय कक्षा शुरू करने की आवश्यकता है। स्वतः। हम PHP का उपयोग रूबी नहीं करते हैं।

नमूना एनएवी:

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

तो बस यह पता लगाने की कैसे वर्तमान पृष्ठ से वर्ग सक्रिय संलग्न करने के लिए की जरूरत है:

<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> 

बूटस्ट्रैप कोड इस प्रकार है। स्टैक पर लगभग हर जवाब के माध्यम से देखा है, बिना किसी वास्तविक खुशी के।

मैं इस के साथ खेला था:

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

लेकिन कोई खुशी।

Answer 1

हम अंत में ठीक करने में कामयाब रहे:

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

Answer 2

यहां पूर्ण ट्विटर बूटस्ट्रैप उदाहरण है और क्वेरी स्ट्रिंग के आधार पर सक्रिय कक्षा लागू है।

कुछ कदम सही समाधान प्राप्त करने के लिए पालन करने के लिए:

1) नवीनतम jquery.js और bootstrap.js जावास्क्रिप्ट फ़ाइल शामिल करें।

2) नवीनतम bootstrap.css फ़ाइल शामिल करें

3) शामिल js में क्वेरी स्ट्रिंग चर मूल्य प्राप्त करने के लिए क्वेरी स्ट्रिंग-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

Answer 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'); 

Answer 4

इनमें से कोई भी मेरे लिए काम नहीं करता है। मेरा बूटस्ट्रैप सेटअप पृष्ठों को अलग करने के लिए नेविगेट करता है (इसलिए मैं इसे एक क्लिक एक्शन पर नहीं कर सकता, लेकिन सक्रिय वर्ग को नए पृष्ठ पर नेविगेशन पर हटा दिया जाता है), और मेरे यूआरएल बिल्कुल मेल नहीं खाते हैं। तो मेरी अपवाद-आधारित स्थिति के आधार पर मैंने यहां क्या किया है। आशा है कि यह दूसरों में मदद करता है:

//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. 

}); 

Answer 5

यदि आप टैग यह स्वचालित रूप से काम करना चाहिए में

data-toggle="pill" 

डाल दिया।

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

मार्कअप

Answer 6

के तहत पढ़ यह सक्रिय मुख्य ड्रॉपडाउन और सक्रिय बच्चों (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'); 
}); 

Answer 7

आप वास्तव में नहीं है बूटस्ट्रैप के साथ किसी भी जावास्क्रिप्ट की आवश्यकता है:

<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> 

मेनू आइटम के चयन के बाद और अधिक कार्य करने के लिए आपको यहां अन्य पोस्ट द्वारा समझाए गए जेएस की आवश्यकता है।

उम्मीद है कि इससे मदद मिलती है।

Answer 8

आप मार्गों और कार्यों के साथ एक MVC ढांचे का उपयोग कर रहे हैं:

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

ईसाई Landgren द्वारा इस उत्तर में सचित्र के रूप में: https://stackoverflow.com/a/13375529/101662

Answer 9

इस प्रयास करें।

// 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'); 

Answer 10

बस मामले में आप Angulajs में बूटस्ट्रैप उपयोग कर रहे हैं: यह एक सरल निर्देश है कि मेरे लिए काम करता है (क्योंकि डेटा-टॉगल Kam द्वारा उद्धृत कोणीय-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> 

Answer 11

यह मेरे लिए ठीक काम करता है। यह सक्रिय नौसेना तत्वों और ड्रॉपडाउन नौसेना तत्वों को सक्रिय के रूप में चिह्नित करता है।

$(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 पास करने के लिए मेरे लिए काम नहीं किया।

Answer 12

समाधान सरल है और सर्वर पक्ष या AJAX के लिए कोई आवश्यकता नहीं है, आपको केवल jQuery और बूटस्ट्रैप की आवश्यकता है। प्रत्येक पृष्ठ पर 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> 

बेन के लिए बड़ा धन्यवाद!YouTube

Answer 13

मेनू और सबमेनू, यहां तक ​​कि URL में पैरामीटर वाला सक्रिय करते हैं, bellow कोड का उपयोग करें:

// 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 स्वीकार करता है:

/पदों
/पदों/1
/पोस्ट/1/संपादित करें

Answer 14

मुझे एक ही समस्या थी एम, और यही वह है जिसे मैंने अपनी ऐप लॉन्च स्क्रिप्ट में जोड़ा, और यह आसानी से काम किया। यहां जावास्क्रिप्ट

$(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'); 
     }); 
    } 
    }); 
}); 

और संबंधित HTML नीचे दिखाया गया है। मैं CoreUI, एक अद्भुत खुला स्रोत व्यवस्थापक टेम्पलेट का उपयोग कर रहा हूँ और कोणीय, सादे बूटस्ट्रैप जैसे कई सामने अंत चौखटे के लिए समर्थन हासिल है, कोणीय 4 आदि

<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> 

Answer 15

$(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"); 

});

अधिक जानकारी के Click Here! लिए

की