Question

我有一个使用双层导航菜单的网站。顶部导航转到物理页面，而过滤器导航在当前页面上的div（#main）中重新加载内容。这是使用jquery完成的，即使在第一次访问时，每个链接的“当前”类样式也设置为（因此调用相应的数据）。换句话说，每次加载和“当前”类样式设置的位置都是由javascript和php管理的。

这很好用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>';
}
}

?>

Answer 1

使用jQuery，您可以使用以下功能：

hasClass检查元素所属的类，请在此处使用，而不是

$('#top_nav a[href$="' + $current_page + '"]').attr('class', 'current');`

addClass将类添加到dom元素
removeClass从元素中删除一个类。在添加课程之前，您必须首先删除前一个课程，例如在这里，您没有在添加新的类之前先删除不需要的类。
```
if ( $current_page.length <= 1) {
    $('#top_nav a:first').addClass('current');
}
```
toggleClass在两个班级之间交替。

根据哪个类处于活动状态，样式可能会有所不同。

进一步阅读：

引用a：hover类：

jQuery to target CSS a:hover class

http://api.jquery.com/hover/

使用类而非ID的多个锚样式

1 个答案: