addClass工作在jsFiddle，但不是在我的頁面

我想動態地添加一個類到下面的代碼中的活動選項卡，它的工作原理當我在jsFiddle中運行代碼，但不是當我運行在我的頁。我在控制檯中沒有顯示任何錯誤，DOM呈現正確的類，但顏色錯誤。任何人都可以看到錯誤？addClass工作在jsFiddle，但不是在我的頁面

my page is here

我的代碼是在這裏：

<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>

來源

2012-03-07 Justin White

我想嘗試在Chrome中查看該元素。使用「檢查元素」，您將能夠應用所有樣式。 app.css可能有一個正在被渲染的樣式，而不是你期望的 – 2012-03-07 09:46:27

由於這裏有太多的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讓我走上正軌！

來源

2012-03-07 10:59:11

的問題是你的CSS選擇器的特異性。

你可以看到它在控制檯：該類.ui-btn-active的樣式被重寫：

enter image description here

通過你的作品的CSS：

enter image description here

嘗試進行更針對活動類的特定選擇器，類似於#custom-navbar li .ui-btn-active

來源

2012-03-07 09:48:47

你在螢火蟲中看着這個嗎？我沒有看到相同的東西，但是我仍然試圖找出螢火蟲。無論如何，我敢肯定，這與我正在設計活動按鈕的確切方式有關。 – 2012-03-07 10:40:47

否這是Chrome的控制檯，檢查菜單中的定位標記 – 2012-03-07 10:45:55

addClass工作在jsFiddle，但不是在我的頁面

回答

相關問題