javascript での 【 html 内への動的タグ生成】について、
javascript にご理解のある方にお教え頂けますと大変嬉しです。
かなり基本的なことで恐縮ですが、当方デザインサイドの人間で
javascript も理屈の情報流し読みだけで、全く自ら書く練習をしていない不理解者です。
それでも急ぎで解決してゆきたい問題があり。
どなた様か、何卒宜しくお願い申し上げます。
----------------------------------------------------------------
作ろうとしているのは、【現在の Yahoo JAPAN! のTOPページ上部の、ページURLを切り替えずにタブをチェンジして、それに対応する下部の div の内容を切り替える】というインターフェイスです。
ただ、IE5.5 などで全くまともに動作しないので、IE5.5を含んだクロスブラウザ対応のため、【Ajax ライブラリのタブチェンジ】ではなく、巷の情報をアレンジした自前 javascript で作っています。
以下のようなタグを javascript で動的に生成する記述を書いているのですが、これが 【現在の Yahoo JAPAN! TOP】の上部クリック切替タブに相当するものです。
<ul class="menu1" id="nav">
<li id="menu1Nav"><a href="#menu1">メニュー1</a></li>
<li id="menu2Nav"><a href="#menu2">メニュー2</a></li>
<li id="menu3Nav"><a href="#menu3">メニュー3</a></li>
<li id="menu4Nav"><a href="#menu4">メニュー4</a></li>
<li id="menu5Nav"><a href="#menu5">メニュー5</a></li>
</ul>
書く <li><a></a><li> は、CSS 側の記述で display:block; 化して 幅×高さ を統一するように指定しており、クリックした際は「ボタン」的な長方形の outline が【点線】で表示されます。
------------------------------------------------------
そのタブを動的生成する関連メソッドが、
function createListItem(id,href,text) {
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(text);
li.setAttribute('id',id);
a.setAttribute('href',href);
a.appendChild(t);
li.appendChild(a);
return li;
}
function setTabClick(listName,categoryName) {
var e = document.getElementById(listName).getElementsByTagName('a')[0];
e.onclick = function(){
showCategory(categoryName);
return false;
};
}
です。
------------------------------------------------------
このとき【Yahoo JAPAN! TOP 切替タブ】は、クリックした際に outline の【点線】が全く表示されないのでスマートですが、
CSS 側で 当該 li a タグに outline:none; を指定していても、
IE8 や firefox などモダンブラウザではそれだけで「クリック時の周囲【点線】」が見えなくなりますが、
まだシェアの多い IE6/IE7 などでは outline プロパティに対応していないため、クリックしてタブを切り替えたときに、見苦しい【周囲枠点線】が残ってしまいます。
そこで巷の情報より、<a onfcus="this.blur()" id"~">テキスト</a> を挿入すれば、それが見えなくなるとのことで、この動的に生成する <li><a> の a タグの中に onfcus="this.blur()" を常に入れるようにして試してみたいのですが、
★ <a href="#menu1"> などのラスト部分に、毎回同様にうまく挿入する記述方法について、教えて頂けますと大変幸いです。
上の2つのメソッドのどちらかで、その部分の追加記述ができると嬉しいのですが、a.setAttribute(); / e.onfocus = などで少し試してみるも、元々記述構造をよく理解していないため、意図する結果は得られません。
------------------------------------------------------
【上記の onfcus="this.blur()" を 各 a タグの最後に動的に毎回追加する記述方法】 のみで良いのですが、どなた様かお知恵をお借りできませんでしょうか。
自分で長時間試行錯誤する余裕が全くなく、もし早めにコメントを頂けますと大変幸いです。
どうぞ宜しくお願い申し上げます。
No.6ベストアンサー
- 回答日時:
>function clickHandler( evt ) {} メソッドを作って、
><ul id="nav"> のラストに onclick="clickHandler( event );"を出すように書ければよりスマートかと思いますが、そもそも <ul id="nav">の後に都合よく onclick="clickHandler( event );" などを出す関数記述が innerHtml なのか何が良いのか良く分かりません。
リスナ登録するだけです。
//@cc_on
function setTabClick( ) {
var ul = document.getElementById( 'nav' );
ul./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', clickHandler, false );
}
もともとのソースの a に onclick を登録してる部分を、ul に変えるだけです。
上記で eventTarget.onclick を使わないのは、リークを避けるため、意図しない上書きを避けるため等々です。
# ul につけるのが無理な場合はさらに上位でもいいです。(最上位の document に付けるようにすると、load を待つ必要もなくなります。)
# スクリプトをドキュメントの一番下に置くことでも、onload の必要性をなくすことができ、さらにページの読み込みの妨げも緩和されます。
> Netscape 7.1 でも、、、
Netscape は target にバグがあるので、#3 のままでは動作しないかもしれません。
function clickHandler( evt ) {
var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
target.nodeType == 3 && ( target = target.parentNode );
if( target.tagName == 'A' && /#/.test( target.href ) ) {
showCategory( target.href.split( '#' )[1] );
//target.blur( );
evt./*@if(1) returnValue = false; @else@*/ preventDefault( ); /*@end@*/
}
}
のように修正してください。
#ついでにその他もろもろも修正
function createListItem(id,href,text) {
var li = document.createElement( 'LI' );
li.id = id;
li.innerHTML = '<a href="'+href+'"'/*@+' hidefocus="true"'@*/+'>'+text+'</a>';
return li;
}
#DOMって、ツリーを切り取って部分的に扱うには便利だけど、一個一個追加するときは不便。DOCTYPE に影響するところでもないし、この場合はinnerで片付けたほうがすっきりする
# ここの掲示板、スペースが消されてしまうので。全角スペースでインデントが入れてあります、コピーするときは、半角などに置換してください。
yuu_x さん、大変ご丁寧なコメントを感謝申し上げます。
トライしてみて、うまくゆけばまた御礼をさせて頂きます。
もしお時間が可能でしたら、
http://oshiete1.goo.ne.jp/qa5276473.html
にもコメントを頂けましたら大変嬉しく。
yuu_x さんならすぐお分かりになられるかと。
デザイン側人間で、「自分で調べろ。甘えんじゃねえ」と言われることは重々承知しております。時間の関係で、ダメ元で実力がおありの方におすがりしており。
もしお時間可能でしたら、コメントをお願い申し上げます。
No.5
- 回答日時:
連投すみません。
スクリプト部分もどうせなら本元の YAHOO のものを拝借してはいかがですか?
http://developer.yahoo.com/yui/index.html
http://www.openspc2.org/reibun/JavaScript_techni …
確かにそれも考えましたが、 Yahoo は 現在ほぼ絶滅していますが Netscape 7.1 では別画面を表示させており、自前のjs なら NN7.1でも同じように動作するもので、そちらの方でとりあえず作ってみてしまいました。
時間ができれば、YUI のライブラリの方も内容を見てみたいと思います。
javascript不勉強者でも、CSS 側のコントロールのみでアレンジ設置できるようでしたら。
コメント誠にありがとうございました。
No.4
- 回答日時:
Yahoo は独自属性使ってるみたいですね。
<a href="…" hidefocus="true"><!- blur の必要なさそうですね。 -->
http://msdn.microsoft.com/ja-jp/library/ms533783 …
#3 return false; が抜けてました。
No.3
- 回答日時:
#1 おもいっきりリークパターンだから、IE を相手にするならやめたほうがいい。
onclick はバブルするので、一個一個につけて回らなくても、上位要素で、監視すれば十分です。
<ul onclick="alert((event.target||event.srcElement).id);">
<li id="menu1Nav">…</li>
…
</ul>
focus のタイミングで blur するのではなく、click の処理が終わった後に blur でよくないですか?
function clickHandler( evt ) {
var target = evt.target || evt.srcElement;
if( target.tagName == 'A' ) {
showCategory( target.href.split( '#' )[1] || '' );
target.blur( );
}
}
<ul onclick="clickHandler( event );">
…
</ul>
その時代にはあまり詳しくありませんが、IE4.0 の時点で HTTP 通信(いわゆる ajax)が導入されてるので使えないわけじゃないと思います。
http://support.microsoft.com/kb/269238/ja
yuu_x さん、コメント誠にありがとうございます。
このメソッドは、javascript 文法も全く不理解な当方には難しいものです。
function clickHandler( evt ) {} メソッドを作って、
<ul id="nav"> のラストに onclick="clickHandler( event );"を出すように書ければよりスマートかと思いますが、そもそも <ul id="nav">の後に都合よく onclick="clickHandler( event );" などを出す関数記述が innerHtml なのか何が良いのか良く分かりません。
function createListItem() や function setTabClick() の中で、具体的にはどのように書けば良いでしょうか?(例示ではなく)。おすがりで大変恐縮です。
> onclick はバブルするので、一個一個につけて回らなくても、上位要素で、監視すれば十分
でしたら、とすれば <ul id="nav">の後に都合よく onclick="clickHandler( event );" ← この引数はただの例示かと思いますが 実際に必要な記述を動的に生成するには、どのように記述すれば良いでしょうか?
onclick の繰り返しが負荷になるなら、次のご投稿で頂いたIE独自拡張の hidefocus="true" を、毎回 <a の後に出すのでもOKなのですが、それも毎回のタグ繰り返しよりは、<ul onclick="~"> の中で上位で1ヶ所監視の方がスマートなのかもしれません。
自分としては、特に記述のスマートさまで極めて求める訳ではありません。 <a の後に hidefocus="true" (href 属性との順序により、前後に半角スペースも出力しなくてはなりませんが)を挿入する記述方法でも問題ありません。
素人質問で恐縮ですが、宜しければご教授お願い致します。
No.2
- 回答日時:
function setTabClick(listName,categoryName) {
var e = document.getElementById(listName).getElementsByTagName('a')[0];
e.onclick = function(){
showCategory(categoryName);
return false;
};
e.onfocus=function(){this.blur();}//追加
}
全体の流れ(関数使用方法とか)がよく見えませんが、こういうことですかね?
IE8で確認、じゃ意味無いか。。。
15mm さん、ご回答誠にありがとうございました。
e.onfocus=function(){this.blur();}//
の追加で、確かに IE5/IE6/IE7 でもクリック時の点線枠が出なくなりました。
一応ご指摘の記述でも目的達成は可能ですが、より後学のため、yuu_x さんのご回答へのお礼に続けさせて頂きます。
大変ありがとうございました。
No.1
- 回答日時:
とりあえずこんな感じでどうでしょう?
<script>
window.onload=function(){
var tags=document.getElementsByTagName("a");
for(var i=0;i<tags.length;i++){
tags[i].onfocus=function(){this.blur();}
}
}
</script>
<ul class="menu1" id="nav">
<li id="menu1Nav"><a href="#menu1">メニュー1</a></li>
<li id="menu2Nav"><a href="#menu2">メニュー2</a></li>
<li id="menu3Nav"><a href="#menu3">メニュー3</a></li>
<li id="menu4Nav"><a href="#menu4">メニュー4</a></li>
<li id="menu5Nav"><a href="#menu5">メニュー5</a></li>
</ul>
この回答への補足
yambejp 様、ご回答誠にありがとうございます。
御好意にすがらせて頂けませんでしょうか。
window.onload=function(){
~ } にはたくさんの関数・メソッドをコールしており、
できれば当該部分のタブに関連する
function createListItem(id,href,text) {}
function setTabClick(listName,categoryName) {}
の中の方で、求める onclick属性を出力させる記述は可能でしょうか?
window.onload=function(){} の方で記述を追加しても良いのですが、
その場合も or ↑ の2つのメソッドの中ででも、id="nav" の ul 内の a 要素にだけ onfcus="this.blur()" を出力したいとの希望です。
他の id 要素内の aリンクには、同効果を適用したくなく。
getElementsById の使い方応用も理解しておらず、不勉強申し訳ありません。
再度ご教授頂けますと大変幸いです。
宜しくお願い申し上げます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューの開閉制御
-
javascriptで、クリックしたら...
-
複数の画像をランダム(シャッ...
-
JQuery UIで、表示したタブの中...
-
クリックした<a>タグのみにClas...
-
アコーディオン自動開閉メニュ...
-
jQueryセレクタ/複数要素の指...
-
同一ページ内で、任意の文字列...
-
JQueryタブのアクティブ アン...
-
【jQuery】hoverしたn秒後にイ...
-
MAX関数を使ってからLEFT JOIN...
-
スタイルシートで画面を上下に...
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
javascriptでスタイルを動的に...
-
キャラクターがぴょこんと飛び...
-
OpenCV での画素値の比較について
-
HTMLで条件分岐はできますか?
-
Ctrl+F(検索)の窓を出したいの...
-
色の変更
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報