特定のセクション (DIV) で、一連の質問が次々に表示されなければならない教育 Web ページがあります。ユーザーが Q1 に回答すると、Q2 がすぐ下に表示されます。
構造は次のとおりです。
Mother_DIV の内容: 質問と Button1 を含むテキスト
上記の質問への回答 + テキストと Button2 を含む display=none としての DIV2
DIV3 as display=none which contains:
Answer to question above + text and a Button3
など、必要に応じて。
任意の要素の表示スタイルを「インライン」に変更する js の show(element) 関数があります。各ボタンは、フォローする DIV の表示をインラインに変更する必要があります。
ボタン 1 には: onclick=show('DIV2') があり、DIV2 が表示されると、Button2 も表示されます
ボタン 2 には: onclick=show('DIV3') そして、DIV3 が表示されると、Button3 も表示されます...
このスクリプトは、IE9 で魅力的に機能します。
Firefox や Webkit ブラウザーでは、非常に忙しくなります。
Button1 は機能し、DIV2 が表示されますが、Button2 はボタンとして認識されません! クリックしても効果がなく、マウスをホバリングしてもポインターが手の形に変わりません。
それを修正するために、構造を変更しました：
Mother_DIV には、Button1 と Button2 と Button3 などといくつかのテキストが含まれています。
次を含むdisplay=noneとしてのDIV2:テキスト
DIV3 as display=none which contains:
text
すべてのボタンが機能するようになり、連続する各 DIV がテキスト チャンクと共に表示されます。
唯一の問題は、テキストが長すぎてユーザーが下にスクロールすると、ページの表示部分にボタンが表示されなくなるため、この UI が受け入れられないことです。
誰かが私の一日を処理して保存する方法を知っていますか?