- 締切済み
ページ読み込み時にcss、javascriptによるタブが崩れて表示されます
cssとjavascriptでタブを作成したのですが http://www014.upp.so-net.ne.jp/kanikko/test/test.html これを組み込んだページを読み込んだときに、総てのタブのブロックが一瞬見える状態になります（htmlに書かれている内容が上から下にそのまま並ぶ感じです）（IE７で確認） そのページの内容が多いためでしょうか。 先にcssとjavascriptをページ読み込みより早く読み込む方法はあるのでしょうか？？ アドバイスいただけたらと思います。 よろしくお願い致します。
- kanikko256
- お礼率100% (5/5)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- suzuko
- ベストアンサー率38% (1112/2922)
関連するQ&A
- ページを最初に表示したときオンになるタブを作る方法（css，javascript）
cssとjavascriptを使ってタブを使用したページを作っています。 ページ表示時に一番左に表示される01タブを黒く表示しておいてほしいのですが、うまくいきません。 元にしたサンプルはちゃんと表示される仕様になっていましたが、いじっているうちにおかしくなったようです。 原因がわからないのでアドバイスいただけると大変ありがたいです。 よろしくお願い致します。 下記が制作中のhtmlです。 http://www014.upp.so-net.ne.jp/kanikko/test/test.html js中身＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /*--setup--*/ window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('topics01'), document.getElementById('topics02'), document.getElementById('topics03'), document.getElementById('topics04'), document.getElementById('topics05'), document.getElementById('topics06'), document.getElementById('topics07') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } css中身＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #javascript_tab_sample { width:448px; background:#ffffff; border:1px solid red; margin-bottom:10px; text-align:left; } #javascript_tab_sample ul#tab { margin:0; padding:0; border:1px solid black; background:blue; float:left; width:100%; } #javascript_tab_sample ul#tab li { text-align:center; border:1px solid orange; border-bottom:none; float:left; width:5em; } #javascript_tab_sample ul#tab li.selected { background-color:#000; } #javascript_tab_sample ul#tab li.selected a { color:#fff; }
- ベストアンサー
- HTML
- cssにjavascriptを入れる？呼び出す？？
技量が乏しいので見当違いな質問でしたらすいません。 今ホームページにjavascriptによるログ解析を行うためhtmlファイルにタグを挿入しているのですが、すべての該当ページに挿入するのに苦労しています。 これをcssを使う事でcssだけ変更すればすべてのファイルにjavascriptを追加するような事はできませんでしょうか。 cssの記述方法についてご教授頂ければありがたいです。 cssやjavascriptそれぞれ1つとっても私には難しく・・・ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScriptを使用したタブの扱い
現在、とある会員サイト内のページ作成を行っているのですが、一部難航してしまっており、検索しても中々思うように情報が見つかりません。 ・ページ自体はデザイン担当により作成。拾い物のJavaScriptを使用したタブメニューを使用している。(CSSによるデザインが組み込まれている。) ・タブはカテゴリ毎に分けられている。(例えば「１～４ページ目はタブ１、２～７ページ目はタブ２」のように) ・難航している部分は「↑で書いている「タブ２(２～７ページ目)に属するページに移動した際に、タブの状態が『タブ２が選択されている状態』にしてほしい」という要望 HTMLのbodyタグのonloadで設定する方法がないかと調べてみましたが、未だに見つかりません。 どなたかご存知であれば、お教えください。よろしくお願いします。
- 締切済み
- JavaScript
- WEBブラウザで、ページを戻っても最後に表示したタブ切替コンテンツ（javascriptで作成）を表示する方法を教えてください。
javascriptで、ページ遷移せずに内容をタブ切替できるページを作成していますが、別ページへリンクしたあと、ブラウザでの「戻る」やjavascriptの「history.back」で戻ったときにタブコンテンツが最後の状態で表示できる方法がありましたら教えてください。 そのページはECサイトの商品紹介のページで、一覧のカテゴリをタブで切り替えられるようにしています。 一覧から詳細ページへ遷移し、そこから一覧へ戻った時に、最後に見ていた内容がリセットされてしまうことを回避したいです。 ユーザーはついさっきまで見ていた内容にたどり着くまでに不要な煩わしさが生じてしまうので良くないのです。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScriptからCSSを呼び出す方法
現在、Noscript時とJavaScript稼働時の呼び出すCSSを分けるため、下記のような設定をしています。whole.cssからJavaScript稼働時のCSSをimportしています。 IE6エラー内容は「'framename' が宣言されていません」です。 記述 <link href="whole.css" rel="stylesheet" type="text/css" id="css"/> <script> framename.document.getElementById ('css').href = 'whole.css'; </script> JavaScript稼働時に呼び込む設定となっています。 IE6のエラー以外他ブラウザーは正常に表示されます。 よろしくお願いします。
- 締切済み
- JavaScript
- IE6でページの表示がずれます。
HTMLで作成したページが、IE7とFirefoxでは、正常に表示されるのですが、 IE6で確認すると、ページの左側部分が全体的に下にずれて表示されます。 CSSを修正したり、手を尽くしてみたのですが修正できません。 何かIE６に正しく表示させるような方法はありますでしょうか。 教えて頂ければ幸いです。
- ベストアンサー
- その他([技術者向] コンピューター)
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- javascriptにてcss切り替え
現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- タブをクリックするとページの上部に移動してしまう
WEBサイトに下記URLにあります「タブコンテンツ」を設置しました。 http://columegg.com/tabcontents/index01.html ページの下の方に設置したのですが、タブをクリックするとページの上部に上がってしまいます。 タブの中身は切り替わってはいるのですが、一瞬迷子になってしまいます。 cssに何か書き加える等して、タブをクリックしても表示位置を変えない方法ありましたら教えて下さい。 よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- HTMLとCSSで作成しましたが何か変です。
最近ＨＴＭＬをＣＳＳを使用して作成しまして今オフラインで動作確認をしています。 ＴＯＰと他のページは全て同じ構造でボタンを押すとＴＯＰと全く同じですが内容が違うコンテンツが表示されます。 本題ですがＴＯＰから他のページに移動する時や他のページからＴＯＰページに戻る時など（他のページから他のページも同じです）、何故かＨＴＭＬに掲載されている画像が一瞬だけ下に表示されたり上に表示されたりしてからＣＳＳで指定されている位置に戻ります。 本当に一瞬（1秒いくか行かないかぐらいです）なのですが気になってしまいました。 これは何か変なのでしょうか？それとも普通でしょうか？。
- ベストアンサー
- HTML
お礼
すいません、おっしゃる通りです。 ちゃんとしたサンプルを用意する時間がなかったのでこういう書き方になってしまいました。 質問していた現象についてですが、タブの下部エリアに表示される部分（div）に最初に表示される”1”にはdisplay:block; それ以外のものについてはdisplay:none;をcssに書き込んでおくことで ページ読み込み時に"1"の内容だけが表示され、他のものを隠しておくことができました。 大変失礼しました。