Выделите ссылки в панели навигации, когда на текущей странице

У меня есть сайт, написанный на ASP.NET и C# backend. Я пытаюсь создать индикатор для моей панели навигации, так что, когда вы находитесь на определенной странице, будет выделена ссылка для текущей страницы. Я пробовал разные подходы, но никто не работал для меня.Выделите ссылки в панели навигации, когда на текущей странице

Это мой HTML:

<div class="nav sidebar"> 
<ul id="navmenu" class="navmenu" runat="server"> 
<li id="link1"><a id="linkone" onserverclick="linkone_onclick" runat="server"><h2>Link 1</h2></a></li> 
<li id="link2"><a id="linktwo" onserverclick="linktwo_onclick" runat="server"><h2>Link 2</h2></a></li> 
</ul> 
</div>

JQuery: Это изменило цвет, но как только страница загружена по ссылке я нажал на цвет был удален, так что это не сработало:

$function(){ 
$('#navmenu li').click(function(){ 
$('#navmenu li').removeClass(); 
$(this).toggleClass('active'); 
}); 
});

Мой active класс в CSS:

.navmenu ul li:hover{background-color:yellow;} 
#navmenu ul li:active{background-color:yellow;} //Trying to highlight the entire `<li>` element.

Я также попытался с этим JS сниппет так, что цвет может остаться, когда перезагружается страница, но опять же, это не сработало:

<script type="text/javascript"> 
$(function() { 
     var url = window.location.href; 

     $("#navmenu a").each(function() { 
      if (url == (this.href)) { 
       $(this).closest("li").addClass("active"); 
      } 
     }); 
    }); 
</script>

И, наконец, я попробовал подход, при котором я бы изменить идентификатор <body> тега каждый раз при загрузке страницы в новую страницу, а затем изменить стиль с помощью CSS, но это не сработало. Когда я использовал инструменты разработчика для проверки <body> тега, идентификатор всегда будет пустым: <body id="">

C#:

public partial class MyClass:System.Web.UI.MasterPage{ 

public string bodyId; //Also tried public string bodyId{get; set;} 

protected void Page_Load(Object s, EventArgs e){} 

protected void linkone_onclick(Object s, EventArgs e){ 

Response.redirect("pageone.aspx"); 
bodyId="linkoneid"; 

} 

protected void linktwo_onclick(Object s, EventArgs e){ 

Response.redirect("pagetwo.aspx"); 
bodyId="linktwoid"; 

}

И в моем .NET:

<body id="<%=bodyId%>">

Как я могу получить ссылку, чтобы выделить, когда я на текущей странице? На этом этапе я возьму любое решение, которое будет работать (jQuery, C#, чистый JavaScript, CSS). Я был бы признателен за любую помощь в этом.

источник

2015-11-29 developer-x

Согласно вашему коду ваши теги '' отображаются без фактических ссылок на них. Если это так, нет смысла сопоставлять атрибут 'href' с расположением окна, так как атрибутов' href' нет.В противном случае, можете ли вы разместить предоставленный html-код, чтобы мы могли понять, в чем проблема? – neoselcev

Поскольку я использую MVC, я не настроен на классический синтаксис ASP, но правильным способом управления этим является установка «активного» класса на сервере, поэтому страница обслуживается всеми классами на месте. – Vi100

Вы могли бы попробовать что-то вроде этого:

 <div class="nav sidebar"> 
     <ul id="navmenu" class="navmenu" runat="server"> 
      <li runat="server" id="Home"><a id="Homelink" href="default.aspx"> 
       <h2>Home</h2> 
      </a></li> 
      <li runat="server" id="link1"><a id="linkone" href="linkone.aspx"> 
       <h2>Link 1</h2> 
      </a></li> 
      <li runat="server" id="link2"><a id="linktwo" href="linktwo.aspx"> 
       <h2>Link 2</h2> 
      </a></li> 
     </ul> 
    </div>

И тогда в вашей основной метод загрузки страницы:

 string TargetPage = Page.AppRelativeVirtualPath; 
     if (TargetPage.ToLower().Contains("one")) 
     { 
      link1.Attributes.Add("style", "background: red;"); 
     } 
     else if (TargetPage.ToLower().Contains("two")) 
     { 
      link2.Attributes.Add("style", "background: blue;"); 
     } 
     else 
     { 
      link1.Attributes.Add("style", "background: white;"); 
      link2.Attributes.Add("style", "background: white;"); 
     }

Отказ от ответственности: Этот механизм немного грубо, но это звучит, как вы хотите для немедленного погашения, и он этого добивается.

Вы также можете взять базовую концепцию, выраженную здесь, и переместить ее в решение jquery. IE: найдите ссылки на основе, скажите стиль, получите текущее имя места и добавьте «активный» стиль на основе ссылки с тем же именем, что и текущее местоположение.

JQuery вариант:

<form id="form1" runat="server"> 
    <div class="nav sidebar"> 
     <ul id="navmenu" class="navmenu" runat="server"> 
      <li runat="server" id="Home"><a id="Homelink" href="default.aspx"> 
       <h2>Home</h2> 
      </a></li> 
      <li id="linkonepage"><a id="link1" href="linkonepage.aspx"> 
       <h2>Link 1</h2> 
      </a></li> 
      <li id="linktwopage"><a id="link2" href="linktwopage.aspx"> 
       <h2>Link 2</h2> 
      </a></li> 
     </ul> 
    </div> 
    <div> 
     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 
</form> 
<script type="text/javascript"> 
    $().ready(function() { 
     var href = document.location.href; 
     var lastPathSegment = href.substr(href.lastIndexOf('/') + 1).replace('.aspx', '').toLowerCase(); 
     var v = $('#' + lastPathSegment); 
     if (v.length) { 
      v.attr('style', 'background: red;'); 
     } 
    }); 
</script>

источник

2015-11-29 15:43:15 Paul

Спасибо, Пол. Я использовал решение C#, и это сработало! –

Поскольку вы устанавливаете bodyId как link id + "id", то вы можете сделать это, как следующее.

$(function() { 
    var linkid = $('body').attr('id').slice(0, -2); 
    $('#'+linkid).closest("li").addClass("active");   
});

Надеюсь, это поможет.

источник

2015-11-29 16:14:06 Azim

Благодарим вас за помощь. –

Выделите ссылки в панели навигации, когда на текущей странице

ответ

Смежные вопросы