Cssは2回目で動作しませんタグhtml

1ページ目のボタンをクリックすると2番目のページ<div id=child>が呼び出され、両方のページでjqueryテーマが使用されますが、2ページ目に問題があります。私は同じフォルダにCSSファイルを入れて、それは2ページ目ではなく1ページ目に効果を与えていますか？Cssは2回目で動作しませんタグhtml

誰でも問題を解決できるので、テーマは2ページ目にも影響しますか？以下は私のコード

<head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <title> 
     </title> 
     <link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" /> 
     <style> 
      /* App custom styles */ 
     </style> 

     <script src="jquerybasic/jquery.min.js" type="text/javascript"> 
     </script> 
     <script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
       $('#buttonid').click(function() { 
        $('#child').toggle(); 
        $('#home').toggle(); 
       }); 
       $('#buttonchild').click(function() { 
         $('#child').toggle(); 
         $('#home').toggle(); 
       }); 

       $('#next').click(function() { 
         $('#home').show(); 
         $('#child').hide(); 
       }); 
       $('#prev').click(function() { 
         $('#home').hide(); 
         $('#child').show(); 
       }); 



       $('#nextchild').click(function() { 
         $('#home').show(); 
         $('#child').hide(); 
       }); 
       $('#prevchild').click(function() { 
         $('#home').hide(); 
         $('#child').show(); 
       }); 
     }); 

     </script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-theme="d" data-role="header"> 
       <h3> 
        The Grand Bhagavati 
       </h3> 
       <a data-role="button" id="next" data-inline="true" data-transition="slide" > 
        &lt;&lt; 
       </a> 
       <a data-role="button" id="prev" data-inline="true" data-transition="fade" > 
        &gt;&gt; 
       </a> 
      </div> 
      <div data-role="content"> 
       <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup" data-mini="true"> 
         <label for="textinput1"> 
          User: 
         </label> 
         <input id="textinput1" type="text" /> 
        </fieldset> 
       </div> 
       <input id="buttonid" data-theme="d" value="Login" type="button" /> 
      </div> 
      <div data-theme="d" data-role="footer" data-position="fixed" > 
       <h3> 
        Page 1 
       </h3> 

       </div> 
     </div> 

     <div data-role="page" id="child"> 
      <div data-theme="d" data-role="header"> 
       <h3> 
        The Grand Bhagavati 
       </h3> 
       <a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" > 
        &lt;&lt; 
       </a> 
       <a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" > 
        &gt;&gt; 
       </a> 
      </div> 
      <div data-role="content"> 

         <label> 
          hi khushbu. welcome...! 
         </label> 


       <input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" /> 
      </div> 
      <div data-theme="d" data-role="footer" data-position="fixed" > 
       <h3> 
        Page 2 
       </h3> 

       </div> 
     </div> 

     <script> 
      //App custom javascript 
     </script> 
    </body>

出典

2012-04-21 unkown

申し訳ありませんが、HTMLだけを示すことは動作しません。あなたのサイトへのリンクを提供できますか？ –

soryしかし、私はそれを公開していない、これは私の学習です私はちょうど私のwamp localhostでテストして – unkown

さて、私は推測することができます。 2つのページが同じCSSファイルを参照していることは間違いありませんか？ 2つのページの要素が同じクラス（またはCSSが使用するセレクタ）を持っていることは絶対に確かですか？等 –

[OK]を少年です:)

あなたがドキュメントを読んで、新しいソフトウェアを使用するのではなく、重要な部分をスキップしてきたようです。

<a data-role="button" href="#child">...</a>

をとjQuery Mobileは、次の擬似ページへの移行を処理します：

ページ間を移動するには、あなただけのリンクのhref属性でこれを置くだろう。 Linking Pagesのドキュメントはhttp://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html

です。これをプログラム的に実行したい場合は、$.mobile.changePage()を内部的に使用することができます。手動（ボタンのclickイベントハンドラで言う）は、この関数を呼び出すための利点は、移行のためのデフォルト以外のオプションを指定できることです。ここで

$('#next').on('click', function() { 
    $.mobile.changePage($('#child'), { transition : 'slide', reverse : true }); 
});

を$.mobile.changePage()のドキュメントです：http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

独自のトランジションをロールバックしたい場合は、1つのdivを表示して別のdivを隠すよりもかなり複雑です。 CSS3（トランスフォーム、トランジション、キーフレームなど）を使用してトランジションをアニメーション化するいくつかのCSSクラスをセットアップする必要があります。

そして最後に、ここで私は働くシングルリンクでヘッダー内のリンクを交換し、あなたのコードのデモです：http://jsfiddle.net/MmKK4/

出典

2012-04-21 16:18:10 Jasper

hurrayは完了しましたが、私のコードがうまくいかなかった理由を説明できます。私は上で議論したことを正しく理解することができません。なぜ、テーマがページ2で動作しないのですか？ – unkown

@ user1161898新しいページを表示する方法がjQuery Mobileにあります。単に '.show（）'関数を実行してもそれは行いません。たとえば、新しいページに変更すると、jQuery Mobileフレームワークは初期化が行われないページを手動で表示しようとするとページを初期化します（**ページのスタイルが変更されていません**）。手動でページを変更したい場合は '$ .mobile.changePage（）'を使いますが、実際には擬似IDのリンクのHREF属性を設定するだけなので、Page-Linkingのドキュメントも読んでくださいあなたが見たいと思っているページ、そして残りはちょうど起こります。。（（機能をクリックします – Jasper

感謝）{ \t \t \t \t \t $ .mobile.changePage（$（ '＃ホーム'）、{トランジション： 'スライド' は、リバース：真} ）; }）;動作していません – unkown

Cssは2回目で動作しませんタグhtml

答えて

関連する問題