Question

我正在尝试动态地将一个类添加到下面代码中的活动选项卡中，并且当我在jsFiddle中运行代码时它会起作用，但是当我在页面上运行它时却不行。我没有在我的控制台中显示任何错误，DOM呈现正确的类，但颜色是错误的。谁能看到错误？

我的代码在这里：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.css" />
    <link rel="stylesheet" href="../css/app.css" />

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">

    function getHandler() {
        var days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
            d = new Date(),
            today = d.getDay();
        return days[today];
    }

    $(document).delegate('[data-role="navbar"] a', 'click', function() {
        $(this).addClass('ui-btn-active');
        $('.content_div').hide();
        $('#' + $(this).attr('data-href')).show();
    });

    $(document).ready(function(){
        $('[data-href="' + getHandler() + '"]').trigger('click').addClass('selected');
    });

</script>
<script src="../js/jquery.mobile-1.0.1.js"></script>
<style type="text/javascript">
    .content_div {
        display: none;
    }
    .content_div:first-child {
        display: block;
    }
    .ui-btn-active { color: #eee; }
</style>
</head>

<body>
<div data-role="page">
    <div data-role="navbar">
    <ul>
        <li><a href="#" data-href="sun">Sun</a></li>
        <li><a href="#" data-href="mon">Mon</a></li>
        <li><a href="#" data-href="tue">Tue</a></li>
        <li><a href="#" data-href="wed">Wed</a></li>
        <li><a href="#" data-href="thu">Thu</a></li>
        <li><a href="#" data-href="fri">Fri</a></li>
        <li><a href="#" data-href="sat">Sat</a></li>
    </ul>
    </div><!-- /navbar -->
    <div id="sun" class="content_div">Sunday</div>
    <div id="mon" class="content_div">Monday</div>
    <div id="tue" class="content_div">Tuesday</div>
    <div id="wed" class="content_div">Wednesday</div>
    <div id="thu" class="content_div">Thursday</div>
    <div id="fri" class="content_div">Friday</div>
    <div id="sat" class="content_div">Saturday</div>
</div>
</html>

Answer 1

问题在于CSS选择器的特殊性。

您可以在控制台中看到它：正在覆盖类.ui-btn-active的样式：

enter image description here

你的css：

enter image description here

尝试为活动类制作更具体的选择器，例如#custom-navbar li .ui-btn-active

Answer 2

由于这里有很多CSS覆盖，我决定以不同的方式做这件事。这是适用于我的最终代码：

$(document).delegate('[data-role="navbar"] a', 'click', function() {
        $('a').removeAttr('style');
        $('.content_div').hide();
        $(this).attr('style', 'color: #eee;');
        $('#' + $(this).attr('data-href')).show();
    });

感谢@DidierGhys让我走上正轨！

addClass在jsFiddle中工作，但不在我的页面上

2 个答案: