-1

我希望能够从一个锚标记中删除类“ui-btn-active”并将其添加到另一个。这是通过单击导航栏按钮（jQuery Mobile）自动完成的，但我有一个从月到日的快捷方式，不会触发类更改。我怎样才能优雅地做到这一点，而无需通过 DOM 循环并使用字符串匹配（或正则表达式），这可能吗？

<header id="view-navigation-view" class="button-list">
<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
    <ul class="ui-grid-a">
        <li class="ui-block-a">
            <a href="#" class="ui-btn-active ui-btn ui-btn-up-c ui-btn-inline" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true">
                <span class="ui-btn-inner"><span class="ui-btn-text"><span>Day</span></span></span>
            </a>
        </li>
        <li class="ui-block-b">
            <a href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline">
                <span class="ui-btn-inner"><span class="ui-btn-text"><span>Month</span></span></span>
            </a>
        </li>
    </ul>
</div>
</header>

这将其删除，但是如何将其添加到另一个？

$('a.ui-btn-active').removeClass('ui-btn-active')

编辑

我为每个锚标记提供了与 span innerText 相同的 ID。

    var setActiveNavbarButton = function(buttonName) {
        $('a.ui-btn-active').removeClass('ui-btn-active');
        $('#' + buttonName).addClass('ui-btn-active');
    };
4

2 回答 2

2

我建议您为您的两个<a..>标签添加不同的 ID 以便轻松访问它们，然后您可以这样做

<header id="view-navigation-view" class="button-list">
<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
 <ul class="ui-grid-a">
    <li class="ui-block-a">
        <a id="link_1" href="#" class="ui-btn-active ui-btn ui-btn-up-c ui-btn-inline" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true">
            <span class="ui-btn-inner"><span class="ui-btn-text"><span>Day</span>    </span></span>
        </a>
    </li>
    <li class="ui-block-b">
        <a id="link_2" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline">
            <span class="ui-btn-inner"><span class="ui-btn-text"><span>Month</span></span></span>
        </a>
    </li>
  </ul>
 </div>
</header>

$("#link_1").removeClass("ui-btn-active");

$("#link_2").addClass("ui-btn-active");

于 2013-06-14T08:09:41.350 回答
1

这很简单。您不需要更改任何 html。这是工作示例：

$(".ui-block-a a").removeClass("ui-btn-active");
$(".ui-block-b a").addClass("ui-btn-active");
于 2013-06-14T08:18:49.987 回答