0

2層のナビゲーションメニューを使用しているサイトがあります。上部のナビゲーションは物理ページに移動し、フィルターナビゲーションは現在のページの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');`

  • addClassdom要素にクラスを追加するには

  • removeClass要素からクラスを削除します。クラスを追加する前に、まず最初に前のクラスを常に削除する必要があります。たとえば、ここでは、新しいクラスを追加する前に、不要なクラスを最初に削除しませんでした。

    if ( $current_page.length <= 1) {
    $('#top_nav a:first').addClass('current');
}

  • toggleClass2つのクラスを交互に切り替えます。

どのクラスがアクティブであるかによって、スタイルが異なる場合があります。

さらに読むために：

a：hoverクラスを参照するには：

CSSをターゲットとするjQuerya：hoverクラス

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

于 2012-12-10T13:29:01.457 に答える