बूटस्ट्रैप नावबार सक्रिय राज्य काम नहीं कर रहा है

Question 1

मेरे पास बूटस्ट्रैप v3 है।

मैं class="active"अपने पर उपयोग navbarकरता हूं और जब मैं मेनू आइटम दबाता हूं तो यह स्विच नहीं करता है। मुझे पता है कि यह कैसे करना है jQueryऔर एक क्लिक फ़ंक्शन का निर्माण करना है लेकिन मैं सोच रहा हूं कि इस कार्यक्षमता को बूटस्ट्रैप में शामिल किया जाना चाहिए? तो शायद यह एक जावास्क्रिप्ट मुद्दा है?

यहाँ मेरा js / css / बूटस्ट्रैप फ़ाइलों के साथ मेरा हेडर है, जिन्हें मैंने शामिल किया है:

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

क्या मैं इसे ठीक कर रहा हूं?

(एक असंबंधित नोट पर, लेकिन संभव संबंधित। जब मेनू मोबाइल पर जाता है, तो मैं मेनू बटन पर क्लिक करता हूं और यह ढह जाता है। इसे फिर से धकेलना हालांकि इसे अन-ढहना नहीं है। इसलिए यह मुद्दा, दूसरे के साथ, दोनों गलत जावास्क्रिप्ट सेटअप का संकेत देते हैं। शायद?)

Question 2

आपने डॉक्स स्थिति के दौरान मिनिफाई किए गए बूटस्ट्रैप js फ़ाइल और पतन / संक्रमण प्लगइन्स को शामिल किया है:

Bootstrap.js और bootstrap.min.js दोनों में एक ही फाइल में सभी प्लगइन्स होते हैं।
केवल एक को शामिल करें।

तथा

सरल संक्रमण प्रभावों के लिए, अन्य JS फ़ाइलों के साथ एक बार ट्रांज़ेक्शन शामिल करें। यदि आप संकलित (या छोटा) बूटस्ट्रैप.js का उपयोग कर रहे हैं, तो इसे शामिल करने की कोई आवश्यकता नहीं है - यह पहले से ही है।

ताकि कम से कम समस्या के लिए आपकी समस्या हो सके।

सक्रिय वर्ग के लिए, आपको इसे स्वयं प्रबंधित करना होगा, लेकिन यह सिर्फ एक या दो पंक्ति है।

बूटस्ट्रैप 3:

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

बूटप्ले: http://www.bootply.com/IsRfOyf0f9

बूटस्ट्रैप 4:

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

Question 3

यहां सक्रिय पृष्ठों को स्विच करने के लिए मेरा समाधान था

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

Question 4

यह मेरे लिए पूरी तरह से काम करता है, क्योंकि "window.location.pathname" में वास्तविक पृष्ठ नाम, उदाहरण निर्देशिका / पृष्ठ .php से पहले डेटा शामिल है। तो वास्तविक नावबार लिंक केवल तभी सक्रिय होगा जब url में यह लिंक होगा।

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
});

Question 5

बूटस्ट्रैप के संस्करण 3.3.4 के साथ, लंबे html पृष्ठों पर आप पृष्ठ के वर्गों को संदर्भित कर सकते हैं। शरीर तत्व के साथ स्पाई-स्क्रॉल के साथ सक्रिय नावबार लिंक को प्रबंधित करने के लिए कक्षा या आईडी द्वारा:

  <body data-spy="scroll" data-target="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 () नहीं होगा।

Question 6

आपको बस बूटस्ट्रैप नावबार के अंदर अपने लिंक में डेटा-टॉगल = "टैब" जोड़ने की जरूरत है :

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

Question 7

यदि आप लंगर लिंक का उपयोग नहीं करते हैं, तो आप कुछ इस तरह का उपयोग कर सकते हैं:

$(document).ready(function () {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});

Question 8

बूटस्ट्रैप 4 के साथ आप इसका उपयोग कर सकते हैं:

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

Question 9

इस सुरुचिपूर्ण समाधान ने मेरे लिए चाल चली। किसी भी नए विचारों / सुझावों का स्वागत है।

$( document ).on( 'click', '.nav-list li', function ( e ) {
    $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );

आप केवल पहुंच वाले आइटम को सक्रिय रखने के लिए jQuery के "भाई-बहनों ()" पद्धति का उपयोग कर सकते हैं और उसके भाई-बहनों को निष्क्रिय कर सकते हैं।

Question 10

मैं आज इसके साथ संघर्ष कर रहा हूं, डेटा-टॉगल केवल तभी काम करता है जब मैं एक पृष्ठ के आवेदन पर हूं।

मैं ajax का उपयोग उस सामग्री को लोड करने के लिए नहीं कर रहा हूं जो वास्तव में मैं अन्य पृष्ठों के लिए पोस्ट अनुरोध कर रहा हूं इसलिए पहला js स्क्रिप्ट भी बेकार था। मैं इसे इस पंक्तियों के साथ हल करता हूं:

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");

Question 11

मुझे उम्मीद है कि यह इस समस्या को हल करने में मदद करेगा।

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

Question 12

मुझे इसके साथ कुछ दर्द हुआ, डायनामिकली जेनरेटेड लिस्ट आइटम्स का उपयोग करके - वर्डप्रेस स्टैक।

यह जोड़ा और यह काम किया:

$(document).ready(function () {
    $(".current-menu-item").addClass("active");
});

मक्खी पर कर देंगे।

Question 13

मैं इसका उपयोग करता हूं। यह छोटा, सुंदर और समझने में आसान है।

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

Question 14

क्लास "सक्रिय" बूटस्ट्रैप के साथ बॉक्स से बाहर प्रबंधित नहीं है। अपने मामले में जब से आप PHP का उपयोग कर रहे हैं आप देख सकते हैं:

Php के साथ html मेनू में class = 'active' कैसे जोड़ें

ज्यादातर इसे स्वचालित करने की एक विधि के साथ आपकी सहायता करने के लिए।

Question 15

बूटस्ट्रैप मोबाइल मेनू के लिए एक आइटम पर क्लिक करने के बाद आप इसे उपयोग कर सकते हैं

$("ul.nav.navbar-nav li a").click(function() {    

    $(".navbar-collapse").removeClass("in");
});

Question 16

मैं बूटस्ट्रैप नंगे विषय का उपयोग कर रहा हूं, यहां नमूना नावबार कोड है। तत्व का वर्ग नाम नोट करें -> .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

दृश्य पृष्ठ (या आंशिक) में इसे जोड़ें: जावास्क्रिप्ट, इसे हर बार पृष्ठ लोड किए जाने की आवश्यकता होती है।

एचएमएल दृश्य स्निपेट ->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

जावास्क्रिप्ट डिबगर में सुनिश्चित करें कि आपके पास window.location.pathname के साथ 'href' विशेषता मिलान का मान है। यह @Zitrax द्वारा समाधान से थोड़ा अलग है जिसने मुझे अपना मुद्दा ठीक करने में मदद की।

Question 17

के लिए 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' : '';
        }
    }    
}]);

यदि आप $ स्थान का उपयोग कर रहे हैं, तो हैश नहीं होगा। तो आप URL का उपयोग करके आवश्यक स्ट्रिंग निकाल सकते हैं $ स्थान

निम्नलिखित सभी मामलों में काम नहीं करेगा ->

निम्नलिखित की तरह एक स्कोप वैरिएबल का उपयोग करने पर ही क्लिक करने पर काम होगा, लेकिन यदि $state.transitionToट्रांस्फ़ॉर्मेशन का उपयोग किया जाता है या window.location या मैन्युअल रूप से URL को अपडेट करने पर, टैब मान अपडेट नहीं किया जाएगा

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

Question 18

इस जावास्क्रिप्ट को अपनी मुख्य js फ़ाइल में जोड़ें।

$(".navbar a").on("click", function(){
      $(".navbar").find(".active").removeClass("active");
      $(this).parent().addClass("active");
    });

Question 19

मुझे एक कदम आगे जाना पड़ा क्योंकि मेरे फ़ाइल नाम मेरे नेवी बार टाइटल्स जैसे नहीं थे। यानी मेरा पहला नेवी बार लिंक HOME था लेकिन फ़ाइल का नाम इंडेक्स है ..

तो बस pathname को पकड़ो और इसे मैच करें।

जाहिर है कि यह एक क्रूड उदाहरण है और अधिक कुशल हो सकता है लेकिन यह अत्यधिक कस्टम आवश्यकता है।

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

Question 20

बूटस्ट्रैप 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 होगा !

यदि आप अपने स्वयं के पीसी पर अपनी साइट का परीक्षण कर रहे हैं (wamp, xampp, दीपक, आदि का उपयोग करके ...) और आपकी साइट कुछ सबफ़ोल्डर में स्थित है तो आपका पथ वास्तव में "/somefolder/something.php" है, इसलिए प्राप्त न करें उलझन में।

मेरा सुझाव है कि यदि आप निम्नलिखित कोड का उपयोग करने के लिए अनिश्चित हैं तो आप यह सुनिश्चित कर सकते हैं कि सही स्थान क्या है। pathname :

$(document).ready(function() {
  alert(location.pathname);
});

Question 21

अगला उत्तर उन लोगों के लिए है जिनके पास एक बहु-स्तरीय मेनू है:

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

Question 22

किसी ऐसे व्यक्ति के रूप में जो जावास्क्रिप्ट को नहीं जानता है, यहाँ एक PHP विधि है जो मेरे लिए काम करती है और समझने में आसान है। मेरा पूरा नौसिखिया एक PHP फ़ंक्शन में है जो मेरे पृष्ठों से शामिल सामान्य घटकों की एक फ़ाइल में है। उदाहरण के लिए मेरे 'index.php' पेज में मेरे पास ... `है

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

फिर 'my_common_includes.php' में मेरे पास ...

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

Question 23

बूटस्ट्रैप 4 आपको liसक्रिय कक्षाओं के लिए आइटम को लक्षित करने की आवश्यकता है । ऐसा करने के लिए आपको माता-पिता को ढूंढना होगा a। का 'हिटबॉक्स' aउतना ही बड़ा है, liलेकिन जेएस में ईवेंट के बबलिंग के कारण यह आपको aइवेंट वापस दे देगा । इसलिए आपको इसे अपने मूल में जोड़ना होगा।

  //set active navigation after click
  $(".nav-link").on("click", (event) => {
    $(".navbar-nav").find(".active").removeClass('active');
    $(event.target).parent().addClass('active');
  });

Question 24

मैंने पहले 5 समाधानों और उनमें से विभिन्न रूपों के बारे में कोशिश की, लेकिन उन्होंने मेरे लिए काम नहीं किया।

अंत में मैंने इसे इन दो कार्यों के साथ काम कर लिया।

$(document).on('click', '.nav-link', function () {
    $(".nav-item").find(".active").removeClass("active");
})

$(document).ready(function() {
    $('a[href="' + location.pathname + '"]').closest('.nav-item').addClass('active'); 
});

Question 25

जब नेडर कोड के लिए हर पेज के लिए शीर्ष लेख का उपयोग करें। jquery काम नहीं करती है, तो सक्रिय को लागू किया जाता है और फिर हटा दिया जाता है, एक सरल समाधान इस प्रकार है।

हर पेज <?php $pageName = "index"; ?>पर इंडेक्स पेज और इसी तरह वेरिएबल सेट करें <?php $pageName = "contact"; ?> कॉन्टेक्ट हमसे पेज पर

फिर हेडर को कॉल करें। पीपी (यानी हेडर में पीएचपी कोड है) <?php include('header.php'); >

शीर्षलेख में। यह सुनिश्चित करें कि प्रत्येक नव-लिंक इस प्रकार है

<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>

<a class="nav-link <?php if ($page_name == 'contact') {echo "active";} ?> href="contact.php">Contact Us</a>

उम्मीद है कि यह मदद करता है क्योंकि मैंने काम करने के लिए दिन बिताए हैं, लेकिन असफल रहा,

अगर कोई कृपया बताए कि वास्तव में क्या समस्या है जब शीर्षलेख ।php शामिल है और फिर पृष्ठ लोड होता है ... तो सक्रिय वर्ग को नव-लिंक में जोड़ने के लिए jquery विफल क्यों है .. ??

Question 26

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

एक कारण या किसी अन्य समाधान के लिए विशेष रूप से काम नहीं किया है, जो लिंक पर क्लिक करने के बाद लिंक पर क्लिक करने के बाद 'सक्रिय' को जोड़ने का प्रयास करते हैं, यदि यह आपको किसी अन्य पृष्ठ पर ले जाता है तो आपके द्वारा जोड़ा गया 'सक्रिय' नहीं होगा। वहाँ क्योंकि DOM बदल गया है। अन्य समाधानों में से कई ने काम नहीं किया क्योंकि वे अक्सर लिंक से मेल नहीं खाते थे या वे एक से अधिक मेल खाते थे।

यह सुरुचिपूर्ण समाधान उन लिंक्स के लिए ठीक है जो अलग-अलग हैं: about.php, index.php, आदि ...

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active');
});

हालाँकि जब यह अलग-अलग क्वेरी स्ट्रिंग जैसे कि index.php? Tag = a; index.php? Tag = b, index.php? Tag = c के साथ एक ही लिंक पर आता है, तो यह उन सभी को सेट करेगा, जो सक्रिय रूप से क्लिक किए गए थे? पथनाम से मेल खाते हुए क्वेरी भी नहीं।

इसलिए मैंने इस कोड की कोशिश की, जो पथनाम और क्वेरी स्ट्रिंग से मेल खाता था और इसने सभी लिंक पर क्वेरी स्ट्रिंग के साथ काम किया था लेकिन जब index.php जैसे लिंक पर क्लिक किया गया तो यह समान क्वेरी स्ट्रिंग लिंक को भी सक्रिय करेगा। ऐसा इसलिए है क्योंकि लिंक में कोई क्वेरी स्ट्रिंग नहीं है, तो मेरा फ़ंक्शन खाली स्ट्रिंग लौटा रहा है, फिर से पथनाम से मेल खाते हुए।

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + returnQueryString(location.href.split("?")[1]) + '"]').addClass('active');
});
/** returns a query string if there, else an empty string */
function returnQueryString (element) {
   if (element === undefined)
      return "";
   else
      return '?' + element;
}

इसलिए अंत में मैंने इस मार्ग को छोड़ दिया और इसे सरल रखा और इसे लिखा।

$('.navbar a').each(function(index, element) {
    //console.log(index+'-'+element.href);
    //console.log(location.href);
    /** look at each href in the navbar
      * if it matches the location.href then set active*/
    if (element.href === location.href){
        //console.log("---------MATCH ON "+index+" --------");
        $(element).addClass('active');
    }
});

यह बिना किसी तत्व के साथ या बिना स्ट्रिंग स्ट्रिंग्स के सभी लिंक पर काम करता है क्योंकि element.href और location.href दोनों पूर्ण पथ को वापस करते हैं। अन्य मेनू आदि के लिए आप बस दूसरे के लिए मूल श्रेणी चयनकर्ता (नावबार) बदल सकते हैं:

$('.footer a').each(function(index, element)...

एक आखिरी बात जो महत्वपूर्ण भी लगती है और वह है js & css लाइब्रेरी का आप उपयोग कर रहे हैं, हालांकि यह शायद एक और पोस्ट है। मुझे आशा है कि यह मदद करता है और योगदान देता है।