0
我有一個使用兩層導航菜單的網站。頂部導航轉到物理頁面，而過濾器導航將內容重新加載到當前頁面上的div（#main）中。這是使用jquery完成的，每個鏈接的「當前」類風格設置爲（因此調用相應的數據）即使在第一次訪問時也會調用。換句話說，什麼加載和「當前」類風格設置的位置都是由javascript和php每次管理的。使用類的多個錨樣式不是ID
這精美的作品Here
我的問題是，客戶端現在要想頂部導航到具有懸停和「電流」爲每個鏈接不同的背景顏色。
我知道我可以用ID做這個..但我寧願用類來做。這可能嗎？
供參考： 爲頂部導航列表中的CSS：
#nav_container {
position: relative;
float: left;
width: 100%;
}
#top_nav {
display: table;
table-layout: fixed;
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
font-family: mbaskerville-semibold;
overflow: hidden;
-webkit-box-shadow: 0 8px 6px -7px #666;
-moz-box-shadow: 0 8px 6px -7px #666;
box-shadow: 0 8px 6px -7px #666;
border-top: 2px solid #CCC;
border-bottom: 0.5px solid #CCC;
}
#top_nav li {
display: table-cell;
*float: left; /* improve IE7 */
height: 25px;
text-align: center;
line-height: 25px;
font-weight: bold;
border-right: 0.5px solid #CCC;
}
#top_nav li a {
display: block;
text-decoration: none;
color: #021020;
background-color: #FFFFFF;
}
#top_nav li a.current {
color: #FFFFFF;
background-color: #766A5A;
}
#top_nav li a:hover {
color: #FFFFFF;
background-color: #766A5A;
}
#top_nav li:first-child {
padding-left: 0;
border-left: 0.5px solid #CCC;
}
的JavaScript：
$(document).ready(function(){
// current page
var $current_page = window.location.pathname;
// top navigation
$(function() {
// set link to current page
if ($current_page) {
$('#top_nav a[href$="' + $current_page + '"]').attr('class', 'current');
}
// if link is root, set first child (home)
if ($current_page.length <= 1) {
$('#top_nav a:first').addClass('current');
}
// if no filter set, set all as filter
if ($('#filter_nav a').hasClass('current')) {
// do nothing
}
else {
$('#filter_nav a:first').addClass('current');
// load new data when filter is changed
$filter = "all";
$(".page_header").load("test.php?", {page: $current_page, filter: $filter}, function(response, status, xhr) {
if(status == 'success') {
$('.page_header').html(response);
}
else if(status == 'error') {
var emsg = '<i>There was an error: ' + xhr.status + ' ' + xhr.statusText + '</i>';
$('.page_header').html(emsg);
}
else { alert(status); }
});
return false
}
});
// filter navigation
var $filter;
$('#filter_nav li a').click(
function(e) {
// prevent the default action & bubbling
e.preventDefault();
e.stopPropagation();
// handle filter change styles
$(this).closest('ul').find('.current').removeClass('current');
$(this).addClass('current');
// load new data when filter is changed
$filter = $(this).attr('href');
$(".page_header").load("test.php?", {page: $current_page, filter: $filter}, function(response, status, xhr) {
if(status == 'success') {
$('.page_header').html(response);
}
else if(status == 'error') {
var emsg = '<i>There was an error: ' + xhr.status + ' ' + xhr.statusText + '</i>';
$('.page_header').html(emsg);
}
else { alert(status); }
});
return false
});
});
PHP類：
<?php
/**
* _document: /lib/omc_frmwrk/present/NavMan.php
*
* = Navigation Management class
* Management of standard navigational elements
*
* ** TO DO:
*
*
*/
// class definition
class NavMan {
/*
* class parameters
*
*/
private static $links;
private static $nav_style;
/**
* Getters
*
*/
/**
* Setters
*
*/
public static function setLinks($x) { self::$links = $x; }
public static function setNavStyle($x) { self::$nav_style = $x; }
/*
* __construct()
* PUBLIC method
* = empty
*
*/
public function __construct() {}
/*
* Navigation Menu:
* PUBLIC method
* = unordered list, css styled, dop-down capable
*
*/
public function setNav() {
// open unordered list
echo '<ul id="' . self::$nav_style . '">';
// set layer
$layer = 0;
// place array content into variables
for ($i = 0; $i < count(self::$links); $i++) {
$this_layer = self::$links[$i][0];
$class = self::$links[$i][1];
$link = self::$links[$i][2];
$page = self::$links[$i][3];
// check if layer is current
if ($layer < $this_layer) {
// open sub list
echo '<ul><li>';
// increase variable
$layer++;
}
else if ($layer == $this_layer) {
// open sub-layer
echo '</li><li>';
}
else if ($layer > $this_layer) {
// open sub-layer
echo '</li></ul><div class="clear"></li><li>';
// decrease variable
$layer--;
}
// place link
echo '<a class="' . $class . '" href="' . $page . '">' . $link . '</a>';
}
// close unordered list
echo '</li></ul><div class="clear"></div>';
}
}
?>