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でその要素を調べます。 'Inspect element'を使用すると、適用されているすべてのスタイルを使用できるようになります。 app.cssは、あなたが期待しているものの代わりにレンダリングされるスタイルを持っているかもしれません –

ここでは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のスタイルが上書きされています：CSSのあなたの部分によって

enter image description here

：

enter image description here

は、より多くのを作ってみましょうアクティブなクラスの特定のセレクタです。#custom-navbar li .ui-btn-active

出典

2012-03-07 09:48:47

これをファイヤーバグで見ていますか？私は同じものを見ていないが、もう一度私はまだ火の虫を理解しようとしている。とにかく、アクティブなボタンをスタイリングしているのとまったく同じことがあると確信しています。 –

これはChromeのコンソールで、メニューのアンカータグを検査しています –

addClassはjsFiddleで動作しますが、私のページにはありません

答えて

関連する問題