मास्टर पेज मेनू में सक्रिय पृष्ठ को हाइलाइट कैसे करें?

Question

मेरे पास masterpage (एएसपी.नेट वेबसाइट में) के अंदर एक मेनू है, और मैं मास्टर पेज मेनू और सबमेनस में सक्रिय पृष्ठ को हाइलाइट करना चाहता हूं।

HTML:

<ul id="nav" class="sf-menu"> 
    <li class="current-menu-item"><a href="index.html">Home</a></li>  
    <li><a href="page.html">menu-2</a> 
     <ul> 
      <li><a href="page-full.html">full</a></li> 
      <li><a href="page-features.html">featurs</a></li> 
      <li><a href="page-typography.html">typography</a></li> 
     </ul> 
    </li> 
</ul> 

सीएसएस: अग्रिम में

#nav>li.current-menu-item>a, 
#nav>li.current_page_item>a{ 
    color: #fe8300; 
} 

धन्यवाद।

Answer 1

अंत में मैं jQuery उपयोग करने के साथ मेरी समस्या हल:

var str=location.href.toLowerCase(); 
    $("#nav li a").each(function() { 
     if (str.indexOf($(this).attr("href").toLowerCase()) > -1) { 
      $("li.current-menu-item").removeClass("current-menu-item"); 
      $(this).parent().addClass("current-menu-item"); 
     } 
    }); 
    $("li.current-menu-item").parents().each(function(){ 
     if ($(this).is("li")){ 
      $(this).addClass("current-menu-item"); 
     } 
    }); 

Answer 2

ऐसा करने के कई तरीके हैं। कुछ आसान और कुछ बदसूरत हैकी वाले हैं:

समाधान 1: मेनू नियंत्रण का उपयोग करें। मानक .NET मेनू नियंत्रण को ऐसा करने का एक आसान समाधान है। यह मेरी राय में सबसे स्वच्छ और सबसे तेज़ समाधान है। this पोस्ट पर एक नज़र डालें। यदि आप इस समाधान को चुनते हैं तो मैबी आपकी मदद करेगा।

समाधान 2: आप वर्तमान आइटम को हाइलाइट करने के लिए किसी प्रकार की जावास्क्रिप्ट का उपयोग करते हैं। अगर आप अपने आप सबकुछ लिखना नहीं चाहते हैं तो jQuery इतना आसान बना देगा। इस समाधान के लिए this पृष्ठ पर एक नज़र डालें। यह पुराना है लेकिन अभी भी प्रभावी है।

समाधान 3: इस थोड़े बदसूरत समाधान है और आपको लगता है कि कई अलग अलग तरीकों से कर सकते हैं: आप हाइपरलिंक नियंत्रण के लिए <a> तत्वों सत्र या कुकी किसी प्रकार का परिवर्तन और सेट कर सकते हैं जब आप उन पर क्लिक करें। सेट करते समय आप कुकी के मूल्य के आधार पर स्टाइल बदल सकते हैं।

आप इसे हल करने के और भी तरीके हैं लेकिन मुझे लगता है कि पहले दो समाधान आपकी मदद करेंगे।

Answer 3

अपने यूआरएल की जाँच करें और html फ़ाइल नाम तो यह तुलना और मास्टर पृष्ठ में अपने सीएसएस वर्ग सेट या मेनू UserControl अलग करना और उसके बाद मास्टर पृष्ठ पर डाल दिया मिलता है।

आप हाइपरलिंक

करने के लिए अपने एंकर टैग बदलना होगा

asp.net मार्कअप:

<li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li> 
<li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li> 
<li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li> 

codebehind:

protected void SelectMenu() 
    { 
     try 
     { 
      string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath); 
      string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath); 

      string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty; 
      if (pageDirectory.Length > 3) 
      { 
       pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2); 
      } 
      if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0) 
      { 
       switch (pageDirectory) 
       { 
        case "Secure\\Clients": 
         switch (page) 
         { 
          case "page-full": 
           lnk_full.CssClass = "current-menu-item"; 
           break; 
          case "page-features": 
           lnk_features.CssClass = "current-menu-item"; 
           break; 
          case "page-typography": 
           lnk_typography.CssClass = "current-menu-item"; 
           break; 
         } 
         break; 
       } 
      } 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
    } 

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

Answer 4

$(function() { 
     $(".navbar‐btn a").each(function() { 
      var hreff = this.href.trim().split("/").splice(3, 4); 

      if (hreff.length > 1) 
       hreff.splice(0, 1); 

      if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0]) 
       $(this).parent().addClass("active"); 
     }); 
    }) 

Answer 5

jQuery(document).ready(function() { 
    var str = location.href.toLowerCase(); 
    jQuery('#topnav li a[href=\'' + str + '\']').addClass('active'); 
});