jQuery thêm lớp học dựa trên URL trang

Tôi có những gì tôi nghĩ rằng là một câu hỏi đơn giản nhưng tôi không thể làm cho nó hoạt động cho cuộc sống của tôi.jQuery thêm lớp học dựa trên URL trang

Tất cả những gì tôi muốn làm là thêm một số javascript vào trang để thêm lớp vào vùng chứa trang chính dựa trên URL.

Hãy nói rằng tôi có một trang web tại root.com và cấu trúc html sau (nói một cách lỏng lẻo):

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id="main" class="wrapper"> 
     Blah, blah, blah 
    </body> 
</html>

Những gì tôi muốn làm một kịch bản là, nếu page = (ví dụ) gốc .com/công nghệ, nó thêm một lớp vào div chính. Vì vậy, div bây giờ sẽ trông giống như:

 <div id="main" class="wrapper tech">

Tôi đã tải jquery, vì vậy tôi muốn làm theo cách đó.

Nguồn

2012-04-02 Matt Martin

Bạn có thể sử dụng window.location để lấy URL hiện tại và sau đó chuyển đổi dựa trên đó:

$(function() { 
    var loc = window.location.href; // returns the full URL 
    if(/technology/.test(loc)) { 
    $('#main').addClass('tech'); 
    } 
});

Điều này sử dụng cụm từ thông dụng để xem liệu URL có chứa cụm từ cụ thể hay không (đặc biệt là: technology) và nếu có, hãy thêm lớp vào phần tử #main.

Nguồn

2012-04-02 20:13:46

Tính năng này hoạt động. Cảm ơn. –

Tác phẩm tuyệt vời tuyệt vời thankyou. – 422

@alex vidal Nó hoạt động tốt cho tôi nhưng nó tải một chút muộn hơn bình thường. Tôi đang sử dụng hành động này để duy trì menu phụ mở khi người dùng ở trong trạng thái được xác định Vì vậy, người dùng có thể thấy sau 1-2 giây làm thế nào menu danh mục phụ mở ra. Tôi muốn nó làm điều này ngay lập tức, làm thế nào tôi có thể tránh điều này? –

Sử dụng đối tượng được cài sẵn location để xác định URL đầy đủ hoặc một số phần của nó.

Nguồn

2012-04-02 20:09:35 kirilloid

Rõ ràng điều này là chính xác, nhưng nó không hoàn toàn trả lời câu hỏi của tôi về * cách * để làm điều đó. –

điều gì đó như dưới đây có thể trợ giúp? dựa trên câu trả lời khác, chỉ bằng cách làm

console.log (window.location)

, bạn có thể giàu có rất nhiều thông tin liên quan đến đối tượng vị trí của bạn

 if(window.location.href=== "root.com/technology") { 
     $("#main").addClass("tech"); 
    }

Nguồn

2012-04-02 20:11:58 DG3

Vâng, đây là cách tôi sẽ làm điều đó:

switch (window.location.pathname) { 
    case '/technology': 
     $('#main').addClass('tech') 
    case '/something': 
    case '/somestuff': 
     $('#main').addClass('some') 
}

Bằng cách này, bạn giữ mã của bạn sạch sẽ và bạn có thể dễ dàng thêm một trường hợp khác.

Xem here ý nghĩa của window.location.pathname.

Nguồn

2012-04-02 21:05:54

Tôi thích điều này bởi vì, như bạn nói, bạn có thể dễ dàng thêm một trường hợp khác mà không cần nhét đồ vật lên. Nhưng tôi không thể làm cho nó hoạt động ... –

Tôi thích câu trả lời này tốt hơn câu trả lời 'tốt nhất' đã chọn. Báo cáo chuyển đổi là cách sạch hơn sau đó viết ra điều kiện. – IE5Master

jQuery thêm lớp học dựa trên URL trang

Trả lời

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