Question

我有这个菜单：

<nav class="show-for-large-up main-navigation default-navigation align_right" role="navigation">
    <ul class="menu-main-navigation active">
        <li id="menu-item-393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home">
            <a href="https://website.com/">Home</a>
        </li>
        <li id="menu-item-415" class="menu-item menu-item-type-post_type menu-item-object-page>
            <a href="https://website.com/shop/">Shop</a>
        </li>
        <li id="menu-item-491" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="https://website.com/about/">About</a>
        </li>
        <li id="menu-item-1086" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1049 current_page_item active">
            <a href="https://website.com/services/" class="active">Services</a>
        </li>
        <li id="menu-item-403" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="https://website.com/portfolio/">Portfolio</a>
        </li>
        <li id="menu-item-1010" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="https://website.com/contact-us/">Contact Us</a>
        </li>
        <li id="menu-item-503" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="https://website.com/my-account/">Login / Register</a>
        </li>
    </ul>
</nav>

myscript.js：

jQuery(document).ready(function($) {
    var activeurl = window.location;
    $('a[href="'+activeurl+'"]').parent('li').addClass('active');

    $(function () {
        var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); 
        $('a').each(function () {
            if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                $(this).addClass('active');
                $(this).parent().addClass("active");
            }
        });
    });

    var aurl = window.location.href; // Get the absolute url
    var parts = aurl.split('/');
    var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash

    $(".main-navigation > ul > li > a").each(function(){
        if($(this).attr("href") == aurl || $(this).attr("href") == '' ) {
            $(this).addClass('active');
            $(this).parent().addClass("active");
        }
    });

});

我正在加载 Js 脚本：

function load_my_script(){
    wp_register_script( 
        'my_script', 
        get_template_directory_uri() . '/js/myscript.js', 
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_script' );
}
add_action('wp_enqueue_scripts', 'load_my_script');

加载 Css 脚本：

function enqueue_custom_stylesheets() {
    if ( ! is_admin() ) {
      wp_enqueue_style( 'custom_css', get_template_directory_uri() . '/css/customCss.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_stylesheets', PHP_INT_MAX );

customCss.css：

.main-navigation > ul > li > a:active {
  text-decoration: underline !important;
}
.main-navigation ul li:active {
  text-decoration: underline !important;  
}

所有内容似乎都已到位（已加载），但:active州仅显示我是developer console使用trigger active state还是仅href。
所以说$(this).parent().addClass("active");没有任何影响，尽管这里的大多数答案都涉及parent()

如何在active上激活href州？感谢名单

Answer 1

请尝试以下代码。

JQUERY

<script>
        $(document).ready(function(){
        $(window).load(function(){
            var x = window.location.href;
                $('.main-navigation ul a[href="'+x+'"]').each(function() {
                    if(x == window.location.href){
                        $('.main-navigation ul li').removeClass('active');
                        $(this).parent('li').addClass('active');
                    } 
                });
            });
        });
    </script>

在你的CSS中

.main-navigation ul li.active a, .main-navigation > ul > li.active > a{
  text-decoration: underline !important;  
}

我在jquery代码上方尝试过，但它确实有效！：）

Answer 2

使用JQuery：

jQuery(document).ready(function($) {

        var aurl = window.location.href; // Get the absolute url
        var parts = aurl.split('/');
        var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash

        console.log(lastSegment);
        $(".main-navigation > ul > li > a").each(function(){
            if($(this).attr("href") == aurl || $(this).attr("href") == '' ) {
                $(this).addClass('active');
            }
        });
});

工作Css：

.main-navigation > ul > li > a.active {
  text-decoration: underline !important;
}

归功于@Rahul。

Thanx everyone

活动类不显示

2 个答案: