0

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

这在这里工作得很好

我的问题是客户现在希望顶部导航具有不同的悬停背景颜色和每个链接的“当前”颜色。

我知道我可以用 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>';
}
}

?>
4

1 回答 1

0

使用 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 以 CSS a:hover 类为目标

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

于 2012-12-10T13:29:01.457 回答