Cách đặt mục thanh điều hướng là hoạt động khi người dùng chọn nó?

Tôi là nhà phát triển Biểu mẫu Web ASP.NET mới và đang cố gắng sử dụng Twitter Bootstrap với Trang chính. Tôi đang đấu tranh với việc thiết lập mục thanh điều hướng là hoạt động khi người dùng chọn nó. Tôi đã tạo trang chủ đơn giản của mình bằng cách theo dõi this tutorial về cách sử dụng Twitter Bootstrap với ASP.NET.Cách đặt mục thanh điều hướng là hoạt động khi người dùng chọn nó?

Dưới đây là đoạn code của trang chủ của tôi:

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

Sau đó, tôi đã thêm kịch bản này để Trưởng để khắc phục vấn đề với menu:

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

Tuy nhiên, không có gì có Đã được thay đổi. Khi tôi chọn bất kỳ mục nào từ thanh điều hướng, lớp đang hoạt động chưa được thêm vào mục được chọn mới và tôi không biết tại sao. Bạn có thể giúp tôi trong việc khắc phục sự cố này không?

Nguồn

2013-08-01 Android FanBoy

Tôi đã đặt điều này trong mỗi trang nội dung của tôi, thay đổi id của mục điều hướng cho mỗi trang (điều này sử dụng bộ chọn JQuery). Vì vậy, để làm việc này cho bạn, bạn sẽ cần phải cung cấp cho các mục danh sách của bạn một Id. Tôi không thêm lớp "hoạt động" vào trang chính vì tất cả những gì chúng ta cần làm là đánh dấu lớp thích hợp khi tải nội dung.

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

Lưu ý: nếu bạn đang sử dụng các điều khiển ASP.NET thay vì liệt kê các mục bên trong thanh điều hướng, chúng có thể bị đặt trước khi chạy khiến javascript không tìm thấy ID bạn nghĩ .

Nguồn

2013-08-01 16:14:13

Sử dụng này:

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

Ví dụ: http://jsfiddle.net/yUdZx/3/

Và, trong "href" sử dụng "Page.ResolveUrl"

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

Đó là tốt hơn ...

Nguồn

2013-10-11 04:46:34 Reynaldo

Cảm ơn! nó hoạt động :) –

Điều này làm việc hoàn hảo mà không cần phải sử dụng để lưu trữ cục bộ! – Sung

cảm ơn rất nhiều. – Sak

Trên thực tế Reynaldo, gần như đã có nó ... Ít nhất là đối với tôi, điều này hoạt động khá đi od, về việc kích hoạt tùy chọn hiện tại và deactiving tùy chọn trước, dựa trên ví dụ của anh ta.

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

Nguồn

2014-07-09 06:58:20 juanechomon

Nếu bạn đang sử dụng navigation quầy bar với thả xuống menu sau đó đặt bên dưới kịch bản ở cuối trang chủ của bạn (trước khi cơ thể đóng thẻ):

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

này hoàn toàn làm việc cho tôi.

Nguồn

2015-08-22 10:10:42 Harshil

mã sau hoạt động nếu tôi có trang con:

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

Nguồn

2016-07-26 18:35:18

Tôi biết bài này là cũ nhưng sử dụng

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

    }); 

});

Vì bạn cũng muốn tích cực của tất cả các bậc cha mẹ.

Nguồn

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

Nguồn

2017-07-25 13:23:46 Ramil

Cách đặt mục thanh điều hướng là hoạt động khi người dùng chọn nó?

Trả lời

Các vấn đề liên quan