Làm thế nào tôi có thể nhận được jQuery hoặc Javascript để thay đổi css dựa trên url hiện tại?

Tôi có một khu vực điều hướng trong một tập tin riêng biệt từ nội dung của tôi, và tôi kéo cả hai bằng cách sử dụng một php bao gồm. Tôi muốn các liên kết khu vực điều hướng thay đổi màu sắc dựa trên bất kỳ trang nào đang hoạt động, tức là URL hiện tại. Vì vậy, tôi muốn jQuery hoặc Javascript để đọc URL hiện tại (thực sự chỉ là tên tệp, như home.html), sau đó viết CSS dựa trên đó.Làm thế nào tôi có thể nhận được jQuery hoặc Javascript để thay đổi css dựa trên url hiện tại?

Vì vậy, như thế nào, nếu url = home.html, thay đổi-css cho nav.home.background-> xanh

Nguồn

2011-09-27 Jono

Chỉ là một ý nghĩ, nhưng có lý do nào để làm điều này với javascript trên PHP không? PHP sẽ cung cấp giải pháp nhất quán cho trình duyệt (ví dụ: không bị ảnh hưởng bởi những người dùng tắt javscript, v.v.) – n00dle

bạn có thể chọn câu trả lời không? – hunter

Trong trường hợp của bạn, bạn có thể thử một cái gì đó như thế này:

$("A").each(function() { 
    if (this.href == document.URL) { 
     $(this).addClass('active'); 
    } 
});

Đó kiểm tra mọi liên kết nếu thuộc tính href khớp với URL tài liệu hiện tại và nếu nó thêm lớp 'hoạt động' vào các lớp CSS phần tử.

Thông báo nhỏ: điều này sẽ chỉ hoạt động nếu URL tuyệt đối được đề cập trong trình đơn và được sử dụng trong tài liệu thực tế khớp chính xác. Vì vậy, giả sử URL hiện tại là http://example.org/dir/, sau đó <a href="index.html"> sẽ không được đánh dấu, vì nó giải quyết thành http://example.org/dir/index.html. <a href="/dir/"> sẽ khớp.
(Đảm bảo rằng cùng một URL được sử dụng cho mỗi trang trong toàn bộ trang web là thực hành tốt, ví dụ:để tối ưu hóa công cụ tìm kiếm và proxy caching)

Các bộ phận khác nhau được sử dụng là:

$("A") chọn tất cả các yếu tố A (neo). Bạn có thể muốn làm cho nó cụ thể hơn một chút bằng cách chọn tất cả các phần tử A trong menu của bạn, ví dụ: $("#menu A"). [jQuery]
.each(func) thực hiện chức năng được chỉ định trên từng phần tử đã chọn. Trong hàm đó, this sẽ tham chiếu đến phần tử đã chọn. [jQuery]
this.href trả lại absolute URI of the linked resource, không, như bạn có thể mong đợi, vị trí tương đối có thể được chỉ định trong HTML. [tiêu chuẩn DOM]
$(this).addClass(clzName) được sử dụng để thêm lớp CSS vào phần tử được chỉ định. [JQuery]

Để đảm bảo $("A") tìm tất cả các yếu tố, thực hiện nó sau khi tài liệu được nạp đầy đủ (trong $(document).ready() jQuery sự kiện handler, hoặc sử dụng onload thuộc tính của thẻ BODY).

Nguồn

2011-09-27 17:43:54 beetstra

Điều này thật tuyệt vời và rất thanh lịch. Tôi không thể làm cho nó hoạt động, mặc dù (http://i5.nyu.edu/~jpr226/)-- $ ("A") mỗi cái làm gì? Điều đó đòi hỏi jQuery? – Jono

có, nó yêu cầu jQuery. Tôi sẽ cập nhật câu trả lời của mình để giải thích thêm một chút. – beetstra

$ (this) .addClass ('active') dường như không hoạt động; Tôi đã cố gắng để xem những gì (điều này) chứa bằng cách thêm "cảnh báo (này)" theo dòng đó, và tôi nhận được một cảnh báo cho biết url hiện tại, dẫn tôi tin rằng bằng cách nào đó nó không phải là một công việc tốt của việc lựa chọn yếu tố được phân loại – Jono

Something như thế này

var url = $(location).attr('href'); 
    //get the url 

if(url.indexOf('home.html') != -1){ 
    //indeOf returns -1 if item not found in string 
    //so if it is not -1 (that is, found) 
    //then apply the styles 
    $('#nav').css('background','blue'); 
}

Bạn có lẽ cần một switch hoặc trường hợp tuyên bố, mặc dù, để xử lý tất cả các URL/phần.

Something như

var url = $(location).attr('href'); 
var fileName = url.slice(url.lastIndexOf('/') + 1); 

switch (fileName){ 
    case 'home.html': 
     $('#nav').css('background','blue'); 
     break; 
    case 'about.html': 
     $('#nav').css('background','red'); 
     break; 
}

Nguồn

2011-09-27 16:53:02

Để đọc url hiện tại trong javascript:

var url = window.location.href;

Để thay đổi thuộc tính css trên một nguyên tố:

$('some_selector').css({ backgroundColor, 'blue' });

Nguồn

2011-09-27 16:53:28

var url_arr = document.URL.split('/'), 
    page = url_arr[url_arr.length - 1]; 

switch (page) { 
    case 'home.html': 
     $('your-element').addClass('your-class'); 
     break; 

    /* other cases here */ 

}

Đó nên làm tric k.

Nguồn

2011-09-27 17:01:16

+1 dành cho nhân viên :) –

Tôi nghĩ giải pháp tốt hơn nhiều là đặt một lớp trên thẻ html thay vì hoán đổi một tệp css trên mỗi trang.

$("html").addClass(window.location.path.split(".")[0]);

và sau đó có bất kỳ phong cách tùy chỉnh css dựa tắt của lớp đó:

html.home > .nav { background-color: blue; } 
html.about > .nav { background-color: green; } 
html.contact > .nav { background-color: red; }

Điều này sẽ chỉ làm việc nếu mỗi trang có một phần mở rộng để phân chia, đó là

Kể từ bạn đang sử dụng PHP, bạn có thể làm điều này mà không cần jQuery chút nào:

<html class="<?php $_SERVER['PHP_SELF'] ?>">

hoặc một cái gì đó như thế, tôi biết rất ít về PHP nhưng tôi chắc chắn nó sẽ là một cái gì đó tương tự hoặc xây dựng tắt của này

Nguồn

2011-09-27 17:04:51 hunter

Làm thế nào tôi có thể nhận được jQuery hoặc Javascript để thay đổi css dựa trên url hiện tại?

Trả lời

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