javascript - 替换嵌套元素中的 css 类

标签 javascript html css jquery-mobile

<分区>

我希望能够从一个 anchor 标记中删除类“ui-btn-active”并将其添加到另一个。这是通过单击导航栏按钮 (jQuery Mobile) 自动完成的,但我有一个从 Month 到 Day 的快捷方式,不会触发类更改。我怎样才能优雅地做到这一点而不诉诸于遍历 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')

编辑

我为每个 anchor 标记赋予了与 span innerText 相同的 ID。

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

最佳答案

我建议你为你的两个添加不同的ID <a..>标签来轻松访问它们,然后你可以做

<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");

关于javascript - 替换嵌套元素中的 css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17103776/

上一篇:c# - 仅适用于 ie8 的复选框样式表

下一篇:html - CSS 下拉菜单在 IE 和 Firefox 中不起作用

相关文章:

javascript - 如何通过单击按钮使用 jquery 检查 html 表中带有复选框 id 的复选框

javascript - Rails - 如何在添加项目时强制刷新页面

javascript - 如何检查字符串是否与带星号的模式匹配

html - Webkit/Blink 浏览器不遵守图例标签上的显示样式

html - 带有内部边框的 svg 边框 Angular

javascript - 在评论之间移动 HTML 代码(包括评论)

javascript - Chrome/FF 中的竞争条件

javascript - 来自后端的 javascript 值中的星级

javascript - 使用 jQuery UI 创建多个可排序网格

css - 如何在 bootstrap 中将较暗的覆盖层覆盖在我的封面图像上?