jQuery जोड़ें वर्ग। मेनू पर सक्रिय

Question

मुझे कोई समस्या है।

मैं सापेक्ष पृष्ठ चालू होने पर आइटम मेनू पर "सक्रिय" वर्ग जोड़ना चाहता हूं।

मेनू बहुत सरल है:

<div class="menu"> 

<ul> 
<li><a href="~/link1/">LINK 1</a> 
<li><a href="~/link2/">LINK 2</a> 
<li><a href="~/link3/">LINK 3</a> 
</ul> 

</div> 

jQuery में मैं अगर यह इस एक मैं जोड़ना चाहते हैं अगर यूआरएल www.xyz.com/other/link1/

है जांच करने की आवश्यकता एक वर्ग एक लिंक 1 का 'ए' तत्व।

मैं कई समाधानों की कोशिश कर रहा हूं लेकिन कुछ भी काम नहीं करता है।

Answer 1

jsFiddle

में एक समाधान के लिए Click here आपको क्या करना होगा आप के रूप में उल्लेख window.location.pathname मिलता है और फिर इसे से regexp बना सकते हैं और नेविगेशन hrefs के खिलाफ यह परीक्षण करने के लिए की जरूरत है।

$(function(){ 

    var url = window.location.pathname, 
     urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there 
     // now grab every link from the navigation 
     $('.menu a').each(function(){ 
      // and test its normalized href against the url pathname regexp 
      if(urlRegExp.test(this.href.replace(/\/$/,''))){ 
       $(this).addClass('active'); 
      } 
     }); 

}); 

Answer 2

window.location.href आपको वर्तमान यूआरएल देगा (जैसा कि ब्राउज़र पता में दिखाया गया है)। इसे पार्स करने और प्रासंगिक भाग को पुनर्प्राप्त करने के बाद आप इसे प्रत्येक लिंक href से तुलना करेंगे और संबंधित लिंक पर active कक्षा असाइन करेंगे।

Answer 3

LI elments, लूप के माध्यम से, जाओ HREF की जाँच करें:

$('.menu').find('a').each(function() { 
    if($(this).attr('href').indexOf('www.xyz.com/other/link1/')>0) { 
      $(this).addClass('active'); 
    } 
}) 

Answer 4

उपयोग window.location.pathname और अपने लिंक के साथ तुलना। आप इस तरह कुछ कर सकते हैं:

$('a[href="~/' + currentSiteVar + '/"').addClass('active'); 

लेकिन पहले आपको इसे सेलेकोर में रखने के लिए वर्तमान साइटवायर तैयार करना होगा।

Answer 5

बाहर की जाँच करें इस इस काम करता है

एचटीएमएल

<div class="menu"> 

    <ul> 
     <li><a href="~/link1/">LINK 1</a> 
     <li><a href="www.xyz.com/other/link1">LINK 2</a> 
     <li><a href="~/link3/">LINK 3</a> 
    </ul> 

</div> 

Jquery

$(document).ready(function(){ 
    $(".menu ul li a").each(function(){ 
     if($(this).attr("href")=="www.xyz.com/other/link1") 
      $(this).addClass("active"); 
    }) 
}) 

Answer 6

मैं अनुमान लगा रहा हूँ आप ASP कोड और जम्मू मिश्रण की कोशिश कर रहे एस कोड और किसी बिंदु पर यह बाध्यकारी कॉल को सही तरीके से तोड़ रहा है या बहाना नहीं है।

शायद आप इसके बजाय एक प्रतिनिधि का उपयोग करने का प्रयास कर सकते हैं। क्लिक ईवेंट को बाध्य करने की जटिलता में कटौती होगी।

एक उदाहरण होगा:

$('body').delegate('.menu li','click',function(){ 
    var $li = $(this); 

    var shouldAddClass = $li.find('a[href^="www.xyz.com/link1"]').length != 0; 

    if(shouldAddClass){ 
     $li.addClass('active'); 
    } 
}); 

देखें कि अगर मदद करता है, यह jQuery से Attribute Starts With Selector उपयोग करता है।

ची

Answer 7

मेरे लिए एक आसान तरीका था:

var activeurl = window.location; 
$('a[href="'+activeurl+'"]').parent('li').addClass('active'); 

क्योंकि मेरे लिंक संपूर्ण url करने के लिए जाना है, लेकिन अगर आपके लिंक रिश्तेदार हैं तो आप उपयोग कर सकते हैं:

window.location**.pathname** 

Answer 8

वसीम का जवाब एक यहां से कुछ पोस्ट विज्ञापन के रूप में काम करते हैं:

http://jsfiddle.net/Realto619/jKf3F/1/

Answer 9

कोई अन्य "addClass" तरीकों मेरे लिए काम किया जब इस एक को छोड़कर मेनू पर एक 'एक' तत्व के लिए एक वर्ग को जोड़ने:

$(function() { 
     var url = window.location.pathname, 
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); 
     $('a').each(function() { 
          if (urlRegExp.test(this.href.replace(/\/$/, ''))) { 
       $(this).addClass('active'); 
      } 
     }); 
    }); 

यह मैं चार घंटे लगे यह खोजने के लिए।

Answer 10

सक्रिय मेनू सेट करना, उनके पास ऐसा करने के कई तरीके हैं। अब, मैं आपको सीएसएस द्वारा सक्रिय मेनू सेट करने का एक तरीका साझा करता हूं।

<a href="index.php?id=home">Home</a> 
    <a href="index.php?id=news">News</a> 
    <a href="index.php?id=about">About</a> 

अब, आप केवल $_request["id"] == "home" thì echo "class='active'" निर्धारित करते हैं, तो हम दूसरों के साथ भी ऐसा ही कर सकते हैं।

<a href="index.php?id=home" <?php if($_REQUEST["id"]=="home"){echo "class='active'";}?>>Home</a> 
<a href="index.php?id=news" <?php if($_REQUEST["id"]=="news"){echo "class='active'";}?>>News</a> 
<a href="index.php?id=about" <?php if($_REQUEST["id"]=="about"){echo "class='active'";}?>>About</a> 

मुझे लगता है कि यह आपके साथ उपयोगी है।

Answer 11

मेरे लिए यह काम: डी

function setActive() { 
     aObj = document.getElementById('menu').getElementsByTagName('a'); 
     for(i=0;i<aObj.length;i++) { 
     if(document.location.href.indexOf(aObj[i].href)>=0) { 
      var activeurl = window.location; 
      $('a[href="'+activeurl+'"]').parent('li').addClass('active'); 
     } 
     } 
    } 

    window.onload = setActive; 

Answer 12

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
    var url = window.location.pathname, 
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
    $("#navbar li a").each(function() {//alert('dsfgsdgfd'); 
    if(urlRegExp.test(this.href.replace(/\/$/,''))){ 
    $(this).addClass("active");} 
}); 
}); 
</script> 

Answer 13

$(function() { 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1); 
    $(".nav li").each(function(){ 
      if($('a',this).attr("href") == pgurl || $('a', this).attr("href") == '') 
      $(this).addClass("active"); 
    }) 
}); 

Answer 14

यह मेरे लिए काम करता है, मूल रूप से नेविगेशन में ही है

<div id="main-menu"> 
    <ul> 
    <li><a href="<?php echo base_url();?>shop">SHOP</a> 
    <li><a href="<?php echo base_url();?>events">EVENTS</a> 
    <li><a href="<?php echo base_url();?>services">SERVICES</a> 
    </ul> 
</div> 

मान लीजिए कि आप URL पर कर रहे हैं: http://localhost/project_name/shop/detail_shop/

और आप कक्षा "सक्रिय" प्राप्त करने के लिए "दुकान" ली लिंक चाहते हैं ताकि आप दृष्टि से सक्रिय नेविगेशन को इंगित कर सकें, भले ही आप "shop_shop" पर "दुकान" के उप पृष्ठ पर हों।

जावास्क्रिप्ट:

var path = window.location.pathname; 
var str = path.split("/"); 
var url = document.location.protocol + "//" + document.location.hostname + "/" + str[1] + "/" + str[2]; 

$('#main-menu a[href="' + url + '"]').parent('li').addClass('active'); 

1. str मिल जाएगा , प्रोजेक्ट, दुकान, detail_shop
2. document.location.protocolhttp मिल जाएगा:
3. दस्तावेज़ ।स्थान।होस्ट नाममिल जाएगा स्थानीय होस्ट
4. str [1]प्रोजेक्ट मिल जाएगा
5. str [2] मिल जाएगा दुकान

मूलतः

कि एनएवी है जो में लिंक से मेल खाएगी href विशेषता "दुकान" से शुरू होती है (या जो भी द्वितीयक निर्देशिका होती है)।