根据URL更改更改DOM元素类名

Change DOM element class name based on URL change

本文关键字：元素 DOM 根据 URL 更新时间：2023-09-29

我有一段代码，它可以拾取URL中的任何哈希更改。

只要有人在中键入散列，它就会工作并注意到

但是，我想更改容器的类名。当我尝试这样做时，它会更改所有的类名，我明白为什么了。

是否可以指定索引，例如
$(".agenda-tabs li").this('class', 'active');

这是代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery Example</title>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $( "#seminars" ).hide();
            $( "#speakers" ).hide();
            $(function(){
                // Bind the event.
                $(window).hashchange( function(){
                    // Alerts every time the hash changes!
                    var currenthash = location.hash;
                    $('.agenda-tabs').find('.ui-link').each(function(){
                        var innerDivId = $(this).attr('href');
                        if(innerDivId==currenthash)
                        {
                            $(".agenda-tabs li").attr('class', 'active');
                        }
                        else
                        {
                            $(".agenda-tabs li").attr('class', '');
                        }
                    });
                })
                // Trigger the event (useful on page load).
                $(window).hashchange();
            });
        });
        </script>
    </head>
    <body>
        <ul class="agenda-tabs nav nav-tabs">
            <li class="first-tab">
                <a class="btn btn-default ui-link" data-toggle="tab" href="#t1">
                City
                <span></span>
                </a>
                <div id='conference'>
                1
                </div>
            </li>
            <li class="active">
                <a class="btn btn-default ui-link" data-toggle="tab" href="#t2">
                Speakers
                <span></span>
                </a>
                <div id='seminars'>
                2
                </div>
            </li>
            <li class="last-tab">
                <a class="btn btn-default ui-link" data-toggle="tab" href="#t3">
                Stage
                <span></span>
                </a>
                <div id='speakers'>
                3
                </div>
            </li>
        </ul>
    </body>
</html>

上下文变量（this）中已经有一个锚<a>元素。您只需要更改父元素<li>

// get the parent li and set it as active
$(this).closest("li").addClass('active'); // Add

或

// get the parent li and set it as active
$(this).closest("li").removeClass('active'); // remove

是否可以为LI元素提供ID？然后您可以将代码更改为：

$(".agenda-tabs li#" + currenthash).addClass('active');

您可以更改到此的绑定

$(window).hashchange( function(){
  var currenthash = location.hash;
$(".agenda-tabs li").removeClass('active')
$('.agenda-tabs').find('.ui-link').each(function(){
    var innerDivId = $(this).attr('href');
    if(innerDivId==currenthash)
    {
       $(".agenda-tabs li").addClass('active');
    }
});