Question

我有一段代码可以获取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>

Answer 1

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

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

Answer 2

您已在上下文变量（<a>）中拥有锚this元素。您只需要更改父元素<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

Answer 3

您可以更改此绑定

$(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');

    }

});

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

3 个答案: