Kullanıcı bunu seçtiğinde navbar öğesi etkin olarak nasıl ayarlanır?

Yeni bir ASP.NET Web Formları geliştiricisiyim ve Twitter Bootstrap'i Ana Sayfa ile kullanmaya çalışıyorum. Kullanıcıyı seçtiğinde navbar öğesini aktif olarak ayarlamaya çalışıyorum. Twitter Bootstrap'i ASP.NET ile kullanma hakkında this tutorial'u takip ederek basit ana sayfamı oluşturdum. Ben menü ile sorunu çözmek için için Kafa bu senaryoyu eklendi, sonraKullanıcı bunu seçtiğinde navbar öğesi etkin olarak nasıl ayarlanır?

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 

    <asp:ContentPlaceHolder id="head" runat="server"> 
    </asp:ContentPlaceHolder> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div class="container"> 
      <div class="row-fluid"> 
       <div class="span12"> 
        <div class="page-header"> 
         <h1>Hello... My First Website with Twitter Bootstrap</h1> 
        </div> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="span3"> 
        <ul class="nav nav-list"> 
         <li class="nav-header">Navigation</li> 
         <li class="active"><a href="Default.aspx">ASP.NET</a></li> 
         <li><a href="Default2.aspx">Java</a></li> 
         <li><a href="#">VB.Net</a></li> 
         <li><a href="#">C#</a></li> 
        </ul> 
       </div> 
       <div class="span9"> 
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

     </asp:ContentPlaceHolder> 
       </div> 
      </div> 
     </div> 

    </div> 
    </form> 
</body> 
</html>

: Burada

ustam sayfasının kod Ancak

<script type="text/javascript"> 
    $(document).ready(function() { 
     var url = window.location.pathname; 
     var substr = url.split('/'); 
     var urlaspx = substr[substr.length - 1]; 
     $('.nav').find('.active').removeClass('active'); 
     $('.nav li a').each(function() { 
      if (this.href.indexOf(urlaspx) >= 0) { 
       $(this).parent().addClass('active'); 
      } 
     }); 
    }); 
</script>

, hiçbir şey vardır değiştirildi. Gezinme çubuğundan herhangi bir öğe seçtiğimde, aktif sınıf yeni seçilen öğeye eklenmedi ve nedenini bilmiyorum. Bu sorunu düzeltmemde bana yardımcı olabilir misiniz?

kaynak

2013-08-01 Android FanBoy

Her sayfanın içerik sayfalarının kimliğini değiştirerek, içerik sayfalarının her birine bunu yerleştirdim (bu JQuery seçicilerini kullanır). Bu yüzden bunun sizin için çalışması için liste öğelerinize bir Kimlik vermeniz gerekir. "Aktif" sınıfı ana sayfaya eklemiyorum çünkü tek yapmamız gereken, içerik yüklendiğinde uygun olanı vurgulamak.

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $("[id$=yourNavItemId]").addClass("active"); 
    }); 
</script>

Not: ASP.NET kullanıyorsanız yerine gezinme çubuğunda iç liste öğelerinin kontrol, bunlar javascript Eğer aradığınız düşünüyorum kimliğini bulmanız değil neden zamanında öneki alma olabilir .

kaynak

2013-08-01 16:14:13

bunu kullanın:

<div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
       <li class="active"><a href="/Default.aspx">Default</a></li> 
       <li><a href="/Clients.aspx">Clients</a></li> 
       <li><a href="/_display/">Display</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

$(document).ready(function() { 
     var url = window.location; 
     $('.navbar .nav').find('.active').removeClass('active'); 
     $('.navbar .nav li a').each(function() { 
      if (this.href == url) { 
       $(this).parent().addClass('active'); 
      } 
     }); 
    });

Örnek: http://jsfiddle.net/yUdZx/3/

Ve "href" kullanım "Page.ResolveUrl"

<a href="<%= Page.ResolveUrl("~/Clients.aspx") %>">Clients</a>

daha iyi olur içinde ...

kaynak

2013-10-11 04:46:34 Reynaldo

Teşekkürler! çalışıyor :) –

Bu yerel depolama kullanmaya başvurmadan mükemmel çalıştı! – Sung

çok teşekkürler efendim. – Sak

Aslında Reynaldo, neredeyse vardı ... En azından benim için, bu güzel çalışır Mevcut seçeneğin aktive edilmesi ve bir önceki örneğini devre dışı bırakması örneğine dayanarak.

$(document).ready(function() { 
    var url = window.location;     
    $('ul.nav li a').each(function() { 
     if (this.href == url) { 
       $("ul.nav li").each(function() { 
        if ($(this).hasClass("active")) { 
         $(this).removeClass("active"); 
        } 
       }); 
       $(this).parent().addClass('active'); 
     } 
    }); 
});

kaynak

2014-07-09 06:58:20 juanechomon

sonra (vücut kapanış etiketi önce ) Ana sayfanızda sonunda senaryo altında koymak navigasyon çubuğu ile açılır-menüsünü kullanıyorsanız: Bu tamamen çalıştı

<script type="text/javascript"> $(document).ready(function() { var url = window.location; $('ul.nav li a').each(function() { if (this.href == url) { $("ul.nav li").each(function() { if ($(this).hasClass("active")) { $(this).removeClass("active"); } }); $(this).parent().parent().parent().addClass('active'); } }); }); </script>

benim için.

$(document).ready(function() { $('.navbar .nav').find('.active').removeClass('active'); var url = window.location.toString(); var u = url.substring(0, url.lastIndexOf("/")).toString(); $('.navbar .nav li a').each(function() { var hr = this.href.substring(0, this.href.lastIndexOf('/')).toString(); if ((u == hr) || (u.indexOf(hr) > -1)) { $(this).parent().addClass('active'); return false; } }); // Deactivation to manually add items you have with href = "#" example: $('#liSalir').removeClass('active'); });

kaynak

2015-08-22 10:10:42 Harshil

Aşağıdaki kod çalışır.

kaynak

2016-07-26 18:35:18

Bu yazı eski olduğunu biliyorum ama aynı zamanda aktif tüm veliler istemeyeceğine göre

$(document).ready(function() { 

    var url = window.location; 
    $('ul.nav li a').each(function() { 
     if (this.href == url) { 
      $("ul.nav li").each(function() { 
       if ($(this).hasClass("active")) { 
        $(this).removeClass("active"); 
       } 
      }); 
      $(this).parents().addClass('active'); 
     } 

    }); 

});

kullanın: Ben alt sayfaları varsa

kaynak

2017-01-12 12:38:00

var windowUrl = window.location.href.toLowerCase(); 
//var windowUrl = window.location.href.toLowerCase().split('.')[0]; 
setTimeout(function() { 
    var windowUrl = window.location.href.toLowerCase(); 
    $('#nav li').removeClass('active'); 
    $('#nav li').each(function (index) { 
     pageUrl = $(this).find('a').attr('href'); 
     if (windowUrl.indexOf(pageUrl) > -1) { 
      $(this).addClass('active'); 
     } 
    }); 
}, 10);

kaynak

2017-07-25 13:23:46 Ramil

Kullanıcı bunu seçtiğinde navbar öğesi etkin olarak nasıl ayarlanır?

cevap

İlgili konular