- 締切済み
ヘッダをJavaScriptで追加する方法
yambejpの回答
- yambejp
- ベストアンサー率51% (3827/7415)
その内容であればajaxで処理するのが簡単かも
関連するQ&A
- javascriptでCSVを読み込み表示する方法を探しています。
javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・ ・ ・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・ （ulのところのCSS指定は、idではなく、classにしたいです） よろしくお願いいたします。
- 締切済み
- JavaScript
- <ul>から</ul>の間をjavascriptで
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="images"> <ul> <li style="width: 354px"><a href="javascript:;">ああ</a></li> <li style="width: 354px"><a href="javascript:;">いい</a></li> <li style="width: 354px"><a href="javascript:;">うう</a></li> <li style="width: 354px"><a href="javascript:;">ええ</a></li> </ul> </div> </body> </html> の<ul>から</ul>の間の<li></li>を1個にしたり5個にしたり、<ul>から</ul>を無くしたり javascriptで動的に変更するスプリクトが知りたいです。
- ベストアンサー
- JavaScript
- タグを切り替えるJavaScriptについて
下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> <h2>page1</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab"> <li><a href="#page1"><span>page1を選択中</span></a></li> <li><a href="#page2"><span>page2</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> <div id="page2"> <h2>page2</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab2"> <li><a href="#page1"><span>page1</span></a></li> <li><a href="#page2"><span>page2を選択中</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- ヘッダーのみ固定について
ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。 開かなくする為にはどうすればいいでしょうか？ CSS * html body { overflow: hidden; } body{ margin: 0px; padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>
- ベストアンサー
- HTML
- Javascriptでプルダウンメニューを作りましたが関数化できません
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。
- ベストアンサー
- JavaScript
- jqueryによるクリック時のclass名追加
サイドバーのメニューをクリックした際にどのページか分かるように、クリックしたリンクの色を変えたいと思います。 例えばページAリンクをクリックした際にliタグにid=selectを追加し、 他のリンクにもしid=selectがついている場合は、削除するという処理を jQueryで行いたいのですが、どのように記述すればよろしいでしょうか？ 分かる方、ご教授お願いします＞＜ ■HTML ----------------------------------- <div id="sidebar"> <ul> <li><a href="">ページA</a></li> <li><a href="">ページB</a></li> <li><a href="">ページC</a></li> <li><a href="">ページD</a></li> </ul> </div> ■CSS ----------------------------------- #sidebar li a { color: #F00; } #select a { color: #0F0; }
- ベストアンサー
- JavaScript
- グローバルナビゲーション等の共通領域
グローバルナビゲーションをliで作っております。 <div id="header"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </div> 上記グローバルナビゲーションを、3ページで使用しております。 3ページ作成後、メニュー5が不要になったためメニュー5を消すことにしました。 当然、3ページすべてでグローバルナビゲーションの修正が必要になりました。 phpでhpを作成する場合、共通部分をheader関数で抜きだし作成し、共通部分+各ページ異なる部分を結合すれば、 グローバルナビゲーションの修正は、共通部分一か所の修正ですむと思います。 htmlとcssのみでグロバールナビゲーション(=共通部分)を使用し、HPを作成する時、 phpのheader関数のように、共通部分を抜き出し、必要時に結合させるといったことは できないのでしょうか？ やはり、3ページすべてのグローバルナビゲーションの修正をするしか方法は ないのでしょうか？ ご教授お願いします。
- ベストアンサー
- HTML
- cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript
お礼
回答ありがとうございます。 ajaxについて調べてみましたが、確かにこれを使ったほうが簡単かもしれません。