বুটস্ট্র্যাপ নববার অ্যাক্টিভ স্টেট কাজ করছে না

Question 1

আমার বুটস্ট্র্যাপ ভি 3 আছে।

আমি আমারটি ব্যবহার class="active"করি navbarএবং আমি মেনু আইটেমগুলি চাপলে এটি পরিবর্তন হয় না। আমি কীভাবে এটি করতে jQueryএবং একটি ক্লিক ফাংশন তৈরি করতে জানি তবে আমি ভাবছি বুটস্ট্র্যাপে এই কার্যকারিতাটি অন্তর্ভুক্ত করা উচিত? সুতরাং এটি একটি জাভাস্ক্রিপ্ট সমস্যা?

আমি অন্তর্ভুক্ত আমার জেএস / সিএসএস / বুটস্ট্র্যাপ ফাইলগুলির সাথে এখানে আমার শিরোনাম:

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

আমি কি এটি ঠিক করে দিচ্ছি?

(কোনও সম্পর্কযুক্ত নোটের উপরে, তবে সম্পর্কিত সম্পর্কিত? মেনুটি মোবাইল এলে আমি মেনু বোতামটি ক্লিক করি এবং এটি ধসে পড়ে it এটি আবার ধাক্কা দিলে এটি আন-ভেঙে পড়ে না So সুতরাং, এই সমস্যাটি, অন্যটি উভয়ই জাভাস্ক্রিপ্টের ভুল সেটাকেই ইঙ্গিত দেয়) সম্ভবত?)

Question 2

ডক্স দস্তাবেজ করার সময় আপনি মিনিফাইড বুটস্ট্র্যাপ জেএস ফাইল এবং ধসে পড়া / রূপান্তর প্লাগইন অন্তর্ভুক্ত করেছেন:

বুটস্ট্র্যাপ.জেএস এবং বুটস্ট্র্যাপ.মিন.জে উভয়ই একটি একক ফাইলে সমস্ত প্লাগইন ধারণ করে।
শুধুমাত্র একটি অন্তর্ভুক্ত।

এবং

সহজ রূপান্তর প্রভাবের জন্য, একবার অন্যান্য জেএস ফাইলগুলির সাথে একবার संक्रमण.js অন্তর্ভুক্ত করুন। আপনি যদি সংকলিত (বা minified) বুটস্ট্র্যাপ.জেএস ব্যবহার করছেন তবে এটি ইতিমধ্যে এটি অন্তর্ভুক্ত করার দরকার নেই।

সুতরাং এটি ন্যূনতম সমস্যার জন্য আপনার সমস্যা হতে পারে।

সক্রিয় শ্রেণীর জন্য, আপনাকে এটি নিজে পরিচালনা করতে হবে, তবে এটি কেবল একটি বা দুটি লাইন।

বুটস্ট্র্যাপ 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

এটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে, কারণ "উইন্ডো.লোকেশন.প্যাথনাম" এ আসল পৃষ্ঠার নামের আগে যেমন ডাইরেক্টরি / পৃষ্ঠা.পিএপিপিও থাকে data সুতরাং ইউআরএলটিতে এই লিঙ্কটি উপস্থিত থাকলে কেবল আসল নাবার লিঙ্কটি সক্রিয়তে সেট করা হবে।

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

Question 5

বুটস্ট্র্যাপের ৩.৩.৪ সংস্করণ সহ, দীর্ঘ এইচটিএমএল পৃষ্ঠাগুলিতে আপনি পির বিভাগগুলি উল্লেখ করতে পারেন। বডি উপাদান সহ স্পাই-স্ক্রোল সহ সক্রিয় নাবার লিঙ্কটি পরিচালনা করতে শ্রেণি বা আইডি দ্বারা:

  <body data-spy="scroll" data-target="spy-scroll-id">

ডেটা-টার্গেটটি আইডি = "স্পাই-স্ক্রোল-আইডি" সহ একটি ডিভ হবে

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

এটি কোনও জাভাস্ক্রিপ্ট ফাংশন ছাড়াই ক্লিক করে লিঙ্কগুলি সক্রিয় করতে হবে এবং পৃষ্ঠার সম্পর্কিত লিঙ্কযুক্ত বিভাগগুলি স্ক্রোল করার সাথে সাথে প্রতিটি লিঙ্কটি স্বয়ংক্রিয়ভাবে সক্রিয় হবে যা কোনও জেএস অন্লিক () না করে।

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

আমি আজ এটির সাথে লড়াই করে যাচ্ছি, ডেটা-টোগল কেবল তখনই কাজ করেছিল যদি আমি কোনও একক পৃষ্ঠার অ্যাপ্লিকেশনটিতে থাকি।

আমি অন্য পৃষ্ঠাগুলির জন্য পোস্ট অনুরোধ করছি এমন সামগ্রীটি লোড করতে আমি আজাক্স ব্যবহার করছি না তাই প্রথম জেএস স্ক্রিপ্টটিও অকেজো ছিল। আমি এই লাইন দিয়ে এটি সমাধান:

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

ক্লাস "অ্যাক্টিভ" বুটস্ট্র্যাপ সহ বক্সের বাইরে পরিচালনা করা যায় না। আপনার ক্ষেত্রে যেহেতু আপনি পিএইচপি ব্যবহার করছেন আপনি দেখতে পাবেন:

কিভাবে পিএইচপি সহ এইচটিএমএল মেনুতে শ্রেণি = 'সক্রিয়' যোগ করুন

আপনাকে বেশিরভাগ এটিকে স্বয়ংক্রিয় করার একটি পদ্ধতিতে সহায়তা করতে।

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

ভিউ পৃষ্ঠাতে (বা আংশিক) এটি যুক্ত করুন: জাভাস্ক্রিপ্ট, প্রতিবার পৃষ্ঠা লোড করার জন্য এটি সম্পাদন করা দরকার।

haml ভিউ স্নিপেট ->

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

জাভাস্ক্রিপ্ট ডিবাগারটিতে নিশ্চিত হয়ে নিন যে আপনার উইন্ডো.লোকেশন.প্যাথনামের সাথে 'href' বৈশিষ্ট্যের মিল রয়েছে matches এটি @ জিট্রােক্সের সমাধানের চেয়ে কিছুটা আলাদা যা আমার সমস্যা সমাধানে আমাকে সহায়তা করেছিল helped

Question 17

এর জন্য AngularJS, আপনি ng-classএটির মতো কোনও ফাংশন ব্যবহার করতে পারেন :

এইচটিএমএল ->

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

আপনি যদি $ অবস্থান ব্যবহার করেন তবে হ্যাশ হবে না। সুতরাং আপনি using অবস্থান ব্যবহার করে URL থেকে প্রয়োজনীয় স্ট্রিংটি বের করতে পারেন

নিম্নলিখিত সমস্ত ক্ষেত্রে কাজ করবে না ->

নীচের মতো স্কোপ ভেরিয়েবলটি ব্যবহার করা কেবল ক্লিক করলেই কাজ করবে, তবে যদি রূপান্তরটি $state.transitionToউইন্ডো ব্যবহার করে করা হয় oc অবস্থান বা ম্যানুয়ালি ইউআরএল আপডেট করার পরে ট্যাব মান আপডেট করা হবে না

<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

আপনার জাভা স্ক্রিপ্টটি আপনার প্রধান জেএস ফাইলটিতে যুক্ত করুন।

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

Question 19

আমাকে এক ধাপ এগিয়ে যেতে হয়েছিল কারণ আমার ফাইলের নামগুলি আমার এনএভি বারের শিরোনামের মতো নয়। অর্থাৎ আমার প্রথম এনএভি বার লিঙ্কটি হোম ছিল তবে ফাইলটির নাম সূচক ..

সুতরাং কেবল পথের নামটি ধরুন এবং এটি মেলে।

অবশ্যই এটি একটি অপরিশোধিত উদাহরণ এবং আরও দক্ষ হতে পারে তবে এটি অত্যন্ত কাস্টম প্রয়োজন।

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

এটি কেবলমাত্র কাজ করবে যদি সূরা রয়েছে location.pathname !

আপনি যদি নিজের সাইটকে নিজের পিসিতে পরীক্ষা করে নিচ্ছেন (wamp, xampp, lamp ইত্যাদি ব্যবহার করে) এবং আপনার সাইটটি কিছু সাবফোল্ডারে অবস্থিত তবে আপনার পথটি আসলে "/somefolder/something.php", সুতরাং পাবেন না বিভ্রান্ত

আমি নীচের কোডটি ব্যবহার করতে অনিশ্চিত থাকলে আমি আপনাকে পরামর্শ দেব যাতে আপনি সঠিক অবস্থানটি নিশ্চিত করতে পারেন canপথনাম :

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

জাভাস্ক্রিপ্ট জানেন না এমন কেউ হিসাবে, এখানে একটি পিএইচপি পদ্ধতি রয়েছে যা আমার পক্ষে কাজ করে এবং বোঝা সহজ। আমার পুরো নাবারটি একটি পিএইচপি ফাংশনে রয়েছে যা আমি আমার পৃষ্ঠাগুলি থেকে অন্তর্ভুক্ত সাধারণ উপাদানগুলির একটি ফাইলে। সুতরাং উদাহরণস্বরূপ আমার '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
 ?>

তারপরে আমার 'মাই কমন_ক্লিন্ডেস.এফপি' এ ...

<?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"; ?>আমাদের সাথে যোগাযোগ করুন পৃষ্ঠায়

তারপরে হেডারকে কল করুন ph <?php include('header.php'); >

শিরোনামে। 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>

আশা করি এটি jquery কাজ করতে বেশ কয়েকদিন ব্যয় করেছে কিন্তু ব্যর্থ হয়েছে,

যদি কেউ দয়া করে ব্যাখ্যা করতে পারেন যে শিরোনাম.এফপি অন্তর্ভুক্ত করা হয় এবং তখন পৃষ্ঠাটি লোড করা হয় তখন সমস্যাটি ঠিক কী? ... কেন জিকুরিটি এনএভি-লিঙ্কটিতে সক্রিয় শ্রেণিকে যুক্ত করতে ব্যর্থ হয় .. ??

Question 26

আমি একটি সমাধান খুঁজছি যা আমি বুটস্ট্র্যাপ 4 নববার এবং লিঙ্কের অন্যান্য গ্রুপগুলিতে ব্যবহার করতে পারি।

এক কারণে বা অন্য বেশিরভাগ সমাধানগুলি কার্যকরভাবে কার্যকর হয়নি যেগুলি অনক্লিককে লিঙ্কগুলিতে 'সক্রিয়' যুক্ত করার চেষ্টা করে কারণ অবশ্যই লিঙ্কটি একবার ক্লিক করা হয় যদি এটি আপনাকে অন্য পৃষ্ঠায় নিয়ে যায় তবে আপনার যুক্ত হওয়া 'সক্রিয়' হবে না DOM পরিবর্তিত হয়েছে কারণ। অন্যান্য সমাধানগুলির বেশিরভাগই কাজ করে না কারণ তারা প্রায়শই লিঙ্কটির সাথে মেলে না বা তারা একের বেশি মিলেছে।

এই মার্জিত সমাধানটি লিংকগুলির জন্য ঠিক যেমন: প্রায়.এইচপি, সূচক.পিএফ, ইত্যাদি ...

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

তবে এটি যখন ইন্ডেক্স.এফপি? ট্যাগ = এ, ইনডেক্স.এফপি? ট্যাগ = বি, ইনডেক্স.এফপি? ট্যাগ = সি এর মতো বিভিন্ন ক্যোয়ারী স্ট্রিংগুলির সাথে একই লিঙ্কগুলিতে আসে তখন এটি সমস্তটি যেমন সক্রিয় হিসাবে ক্লিক করা হত সক্রিয় সেট করে দেয়? পথের সাথে মিলছে না কোয়েরিও।

সুতরাং আমি এই কোডটি চেষ্টা করেছি যা পাথের নাম এবং ক্যোয়ারী স্ট্রিংয়ের সাথে মিলেছে এবং এটি ক্যোয়ারী স্ট্রিংয়ের সাথে সমস্ত লিঙ্কে কাজ করেছে তবে যখন 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');
    }
});

এটি কোয়েরি স্ট্রিংগুলির সাথে বা ছাড়াই সমস্ত লিঙ্কগুলিতে কাজ করে কারণ এলিমেন্টহ্রেফ এবং লোকেশন.href উভয়ই পুরো পথে ফিরে আসে। অন্যান্য মেনু ইত্যাদির জন্য আপনি কেবল অন্য একটির জন্য প্যারেন্ট ক্লাস সিলেক্টর (নাবার) পরিবর্তন করতে পারেন:

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

একটি গুরুত্বপূর্ণ জিনিস যা গুরুত্বপূর্ণ বলে মনে হয় এবং তা হ'ল জেএস ও সিএসএস লাইব্রেরির আপনি এটি ব্যবহার করছেন তবে এটি সম্ভবত অন্য একটি পোস্ট। আমি আশা করি এটি সাহায্য করে এবং অবদান রাখবে।