• 締切済み

javascriptで同一エレメントを抜き出したい

javascriptでクリックしたエレメントの祖先のエレメントが全て同じだった場合に、 該当するもののタグ内の言葉を抜き出そうと思っているのですが、 どのようにすればすっきり書けるのかがわかりません。 例えば下の[例1]、[例2]はともに、「あ」をクリックしたときに、「あ」「い」「う」を抜き出して、「え」「お」は抜き出したくありません。 [例１] <div class = "a"> <ul> <li>あ</li> ←クリック <li>い</li> <li>う</li> </ul> </div> <ul> <li>え</li> <li>お</li> </ul> *** [例2] <div> <span><em>あ</em></span>　←クリック </div> <div> <span><em>い</em></span> </div> <div> <span><em>う</em></span> </div> <span><em>え</em></span> <span><em>お</em></span>

みんなの回答

  • utun01
  • ベストアンサー率40% (110/270)
回答No.6

No.1です。ちょっと面白そうだったので、また書いてみました。 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> var buff=""; $(document).ready(function(){ $('body').find('*').each(function(){ if($(this).children().length != 0){return;}; $(this).click(function(){ obj = $(this); buff=""; while(obj[0].localName != 'html'){ buff=obj[0].localName+" > "+buff; obj=obj.parent(); } buff=buff.substring(0,buff.length-3); alert($(buff).text()); }); }); }); </script> </head> <body> <div class = "a"> <ul><li>あ</li><li>い</li><li>う</li></ul> </div> <ul><li>え</li><li>お</li></ul> <div><span><em>あ</em></span></div> <div><span><em>い</em></span></div> <div><span><em>う</em></span></div> <span><em>え</em></span> <span><em>お</em></span> </body> </html> こういうことでしょうか。

全文を見る
すると、全ての回答が全文表示されます。
  • think49
  • ベストアンサー率59% (285/482)
回答No.5

要件とはやや異なりますが、同一階層の要素ノードを抽出してみてはどうでしょうか。 http://jsfiddle.net/DAEbn/5/ ブラウザ拡張とのことだったので IE8- は動作保証外としています。 ちなみに、document.getElementsByTagName('*') は IE8- でコメントノードも拾いますので、クロスブラウザするなら要注意です。

xiusaq
質問者

お礼

すみません。皆さん、あまりにもしっかりご回答くださって驚いています。とても嬉しいです。 残念なながら、まだjsには慣れておらず、解析に時間がかかりそうなので、先にお礼の返事させて頂きます。素晴らしいサンプルをどうもありがとうございます。 じっくり解析してみたいと思います。ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

#2です。 #3様の比較のアイデアが素晴らしいので、無断借用して書き直してみました。 最初に属性にセットしてしまうのは、どうも…という気がするので、その都度比較する方式はそのままです。 今回は、#2と違って、子孫要素も含めてそのままテキストを収集しちゃってます。 （その方が簡単なので…（ちょっと手抜き）） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- (function(){ function hoge(evt){ 　var t = evt.target || evt.srcElement; 　var pedigree = getPedigree(t), tn = t.tagName; 　if(tn=="HTML" || tn=="BODY") return; 　var node, nodes, i=0, re=""; 　 　nodes = document.getElementsByTagName(tn); 　while(node=nodes[i++]) 　　if(pedigree == getPedigree(node)) 　　　re += (re?"\n":"") + (node.textContent || node.innerText); 　if(re) alert(re); } function getPedigree(node){ 　var nam, list = ""; 　while((node=node.parentNode) && (nam=node.tagName)) list += nam + ":"; 　return list; } /*@cc_on@*/ document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/ 'click', hoge, false); })(); //--> </script> </head> <body> <div> <h2>例１</h2> <div class = "a"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <ul> <li>え</li> <li>お</li> </ul> </div> <div> <h2>例2</h2> <div> <span><em>あ</em></span> </div> <div> <span><em>い</em></span> </div> <div> <span><em>う</em></span> </div> <span><em>え</em></span> <span><em>お</em></span> </div> </body> </html>

xiusaq
質問者

お礼

fujillinさん、度々有り難うございます！

全文を見る
すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

ちょっと強引ですが、こんな感じでどうでしょうか？ <html> <head> <script> try{ document.addEventListener ('click',function(e){clickfunc(e)},true); //基本 }catch(e){ document.attachEvent('onclick',function(e){clickfunc(e)}); //IE } window.onload=function(){ var n=document.getElementsByTagName("body").item(0).getElementsByTagName("*"); for(var i=0;i<n.length;i++){ var val=n[i].nodeName; var p=n[i].parentNode; while(p){ val+=(val!=""?",":"")+p.nodeName; p=p.parentNode; } n[i].setAttribute("parentTags",val); } } function clickfunc(e){ var t = (e.srcElement || e.target); var pt=t.getAttribute("parentTags"); var val=""; var n=document.getElementsByTagName("body")[0].getElementsByTagName("*"); for(var i=0;i<n.length;i++){ if(n[i].getAttribute("parentTags")==pt) val+=(val==""?"":",")+(n[i].textContent || n[i].innerText); } alert(val); } </script> </head> <body> <div class = "a"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <ul> <li>え</li> <li>お</li> </ul> <hr> <div> <span><em>か</em></span> </div> <div> <span><em>き</em></span> </div> <div> <span><em>く</em></span> </div> <span><em>け</em></span> <span><em>こ</em></span> </body> </html>

xiusaq
質問者

お礼

すみません。皆さん、あまりにもしっかりご回答くださって驚いています。とても嬉しいです。 残念なながら、まだjsには慣れておらず、解析に時間がかかりそうなので、先にお礼の返事させて頂きます。素晴らしいサンプルをどうもありがとうございます。 じっくり解析してみたいと思います。ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

どういうルールなのかよくわかってませんけれど、特に子孫要素をどうするのかとか、テキストを持たない要素をクリックした場合とか… とりあえず、こんなふうに仮定してみました。 『祖先要素に遡って、同じタグ構成になっている兄弟、従兄弟…要素のみを抜き出し、その直接のテキストだけ取り出す。（子孫要素は無視）』 （質問者さんが判断して決めるという可能性もあるけれど…） あまり効率は良くないかもしれませんが、質問の意味がよくわかってないのと、あくまでも考え方のサンプルということで。 意図と違う場合は、よしなに訂正してください。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- (function(check, getText){ function hoge(evt){ 　var t = evt.target || evt.srcElement; 　var ancestor = [t], result = []; 　var nodes, node = t, i = 0, re = "", anc; //祖先の洗い出し 　while((node = node.parentNode) && node.tagName) ancestor.push(node); //対象候補要素を取得 　nodes = document.getElementsByTagName(t.tagName); //対象を絞込み 　while(anc=nodes[i++]) if(check(anc, ancestor)) result.push(anc); //結果の表示 　i = 0; 　while(node=result[i++]) re += getText(node); 　nodes = ancestor = result = null; 　alert(re); } /*@cc_on@*/ document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/ 'click', hoge, false); })( function(e, a){ 　var j = 0; 　while(e!=a[j] && e.tagName == a[j].tagName) e = e.parentNode, j++; 　return (e && e==a[j]); }, function(elm){ 　var c = elm.firstChild, s, str = ""; 　while(c){ 　　if(c.nodeType == 3){ 　　　s = c.nodeValue.replace(/[\r\n]/g,""); 　　　if(s) str += (str?" ":"") + s; 　　} 　　c = c.nextSibling; 　} 　return str?str+"\n":""; } ); //--> </script> </head> <body> <div> <h2>例１</h2> <div class = "a"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <ul> <li>え</li> <li>お</li> <li>か<span>対象外</span>き</li> </ul> </div> <div> <h2>例2</h2> <div> <span><em>あ</em></span> </div> <div> <span><em>い</em></span> </div> <div> <span><em>う</em></span> </div> <span><em>え</em></span> <span>対象外1<em>お<span>対象外</span></em>対象外2</span> <div><em>対象外</em></div> </div> </body> </html>

xiusaq
質問者

お礼

すみません。皆さん、あまりにもしっかりご回答くださって驚いています。とても嬉しいです。 残念なながら、まだjsには慣れておらず、解析に時間がかかりそうなので、先にお礼の返事させて頂きます。素晴らしいサンプルをどうもありがとうございます。 おっしゃるとおり、子孫要素をどうするかについてはそこまで詰めて考えていませんでした。もし子孫があれば、タグを取り払って中のテキストを抜く、などにするかもしれません。よく自分で考えてみます。 本当にありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。
  • utun01
  • ベストアンサー率40% (110/270)
回答No.1

jqueryを使うと簡単にできますよ～ 以下サンプルです <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> var buff=""; $(document).ready(function(){ $('#ul1').each(function(){ $(this).click(function(){ buff=""; $('#ul1 li').each(function(){ buff = buff + $(this).text(); }); alert(buff); }); }); $('#ul2').each(function(){ $(this).click(function(){ buff=""; $('#ul2 li').each(function(){ buff = buff + $(this).text(); }); alert(buff); }); }); }); </script> </head> <body> <ul id='ul1'> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <ul id='ul2'> <li>え</li> <li>お</li> </ul> </body> </html>

xiusaq
質問者

補足

[補足]ご回答ありがとうございます。すみません。言葉足らずでした。idをふるのではなく、自動的に判別して欲しいのです 以下の例でいうと、「あ」か「い」か「う」をクリックすると、「あ」「い」「う」を取得し、 「え」か「お」をクリックすると、「え」「お」を取得する、という。 <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <ul> <li>え</li> <li>お</li> </ul> [例2] <div> <span><em>あ</em></span> </div> <div> <span><em>い</em></span> </div> <div> <span><em>う</em></span> </div> <span><em>え</em></span> <span><em>お</em></span> 何でこんなことをしたいかというと、ブラウザの拡張として利用して、自分が必要なデータを、ウェブサイト上から全て引っこ抜きたいからです。よろしくお願いいたします。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • タグを切り替える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に対応させるためにはどのようにすればいいでしょうか。 よろしくお願いします。

  • CSSのタグについて

    今CSSを勉強中の者です。一つ質問させて下さい。 とあるサイトで --------------------------------------------- <div id="album"> <ul> <li><a id="photo" href="#"> 　<em><img src="album/img/photo.jpg" /></em> 　　　<span>写真１</span></a></li> </ul> </div> --------------------------------------------- とHXTML表記があり、CSSの設定は下記のようになっていました。 （※一部抜粋） --------------------------------------------- div#album ul li a em, div#album ul li a span 　{ 　display: none; 　} --------------------------------------------- そこで質問です。<em>や<span>のタグを単独で使った 事がなく、どうしてこの二つのタグが使われているの かがわかりません。 特にemはフォントサイズの指定ではないのでしょうか？ それともCSSで効果の設定をするために無理に入れて いるだけなのでしょうか。 勉強中の為に訳の分からない質問なのかも知れませんが どなたか分かりやすく教えて頂けますと幸いです。

  • 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にしたいです） よろしくお願いいたします。

  • リストタグに入れることのできるタグはないですか？

    現在お店のHPで、メニュー表を作っています。 <div class="box1"> <ul> <li class="box2">商品1</li><span class="box3">値段1</span> <li class="box2">商品2</li><span class="box3">値段2</span> <li class="box2">商品3</li><span class="box3">値段3</span> <li class="box2">商品4</li><span class="box3">値段4</span> </ul> <div> という感じでHTMLを書いています。 　ですが、聞くところによると<ul>には<span>を入れてはいけないとのこと・・・ 　商品と値段は別々のボックスに入れて横に並べたいので、できれば違った要素で囲みたいのですが、可能でしょうか？ 　できなければリストタグは使わずに行こうとおもいますが、なんとかなればしたいとおもいます。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 簡潔なJavaScriptで実現したい

    次のような、btnToggleというクラス名のdivタグがいくつかあるHTMLで、 それぞれクリックするとそれぞれの「開く／閉じる」が反転するという動きをさせたいです。 <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>AAA</div> </div> <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>BBB</div> </div> <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>CCC</div> </div> 　　　： <div class="btnToggle"><a href="#"><span>＋</span>開く</a> <div>XXX</div> </div> 下記のようなJavaScriptで実行してみたのですが、 いくつかのdivタグをそれぞれクリックすると、flgの値と現在の状態が入れ替わってしまいます。 クラス名が同じで、flgも一つの変数なので当たり前なのですが… <script type="text/javascript"> $(document).ready(function(){ var flg = "close"; $(".btnToggle").click(function(){ if(flg == "close"){ $(this).html("<span>－</span>閉じる"); flg = "open"; }else{ $(this).html("<span>＋</span>開く"); flg = "close"; } }); }); </script> 私が考えられることは、classではなく、idで「btnToggle1」「btnToggle2」「btnToggle3」…などと定義し、 JavaScriptのプログラムを次のように書くしか思いつかないのですが、 これでは、我ながら間抜けなプログラムだなと思いました。 <script type="text/javascript"> $(document).ready(function(){ var flg1 = "close"; $(".btnToggle1").click(function(){ if(flg1 == "close"){ $(this).html("<span>－</span>閉じる"); flg1 = "open"; }else{ $(this).html("<span>＋</span>開く"); flg1 = "close"; } }); var flg2 = "close"; $(".btnToggle2").click(function(){ if(flg2 == "close"){ $(this).html("<span>－</span>閉じる"); flg2 = "open"; }else{ $(this).html("<span>＋</span>開く"); flg2 = "close"; } }); var flg3 = "close"; $(".btnToggle3").click(function(){ if(flg3 == "close"){ $(this).html("<span>－</span>閉じる"); flg3 = "open"; }else{ $(this).html("<span>＋</span>開く"); flg3 = "close"; } }); 　　　　　　　： 　　　　　　　： }); </script> 配列などを使えばもっと簡潔になるのでしょうか。 どうか教えてくださいますようお願い申し上げます。

  • javascriptで文字サイズの変更

    HP初心者です。 書籍通りに作ってみてのですが文字は変更されるのですが、 作った大中小の画像？までクリックするとズレてしまいます。 文字だけが変更されるのを希望してます。 ↓見てやって下さい http://www.d-judge.jp/d-judge/test.html ソースは HTML↓ <div id="header"> <div class="font_size"> <ul> <li><img src="images/txt_size.gif" alt="文字サイズ" width="68" height="14" /></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('l')" class="textL"><span>大</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('m')" class="textM"><span>中</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('s')" class="textS"><span>小</span></a></li> </ul> </div> <p>ああああああ テストです。</p> </div> css↓ /* 文字サイズ ----------------------------*/ #header .font_size { margin: 2.5em 0px 0px; position: absolute; left: 86px; top: -2px; width: 250px; text-align: right; height: 24px; } #header .font_size li { padding: 0px 0px 0px 1em; float: left; list-style: none; } #header .font_size li img { margin-top: 5px 0; } #header .font_size ul li a { height: 24px; width: 24px; display: block; } #header .font_size ul li a span { display: none; } #header .font_size ul li .textL:link, #header .font_size ul li .textL:visited, #header .font_size ul li .textL:active { background-image: url(images/text_L.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textL:hover { background-image: url(images/text_L_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:link, #header .font_size ul li .textM:visited, #header .font_size ul li .textM:active { background-image: url(images/text_M.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:hover { background-image: url(images/text_M_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:link, #header .font_size ul li .textS:visited, #header .font_size ul li .textS:active { background-image: url(images/text_S.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:hover { background-image: url(images/text_S_o.gif); background-repeat: no-repeat; background-position: left top; } javascript↓ /*フォントサイズ変更*/ function changeFsize(fontsize) { var change = document.getElementsByTagName("body")[0]; switch(fontsize) { case "s": var percent = "62.5%"; break; case "m": var percent = "75%"; break; case "l": var percent = "85%"; break; } change.style.fontSize = percent; } です。 どなたかお分かりになる方宜しくお願いしますm(＿ ＿ )m

  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }

  • jqueryで要素の獲得方法

    jqueryについてお聞きしたします。 下記のようなソースで <div class="sideBox"> <div class="sideBoxHead"> ・・・ </div> <div class="sideBoxInner basename"> <ul><li class="on"><span title="main title">aaa</span></li> <li><a href="html1" title="title1">bbb</a></li> <li><a href="html2" title="title2">bbb</a></li> ： ： <li class="last"><a href="htmlX" title="titleX">zzz</a></li> </ul></div> </div> "title2"をクリックした時の"html2"を獲得したいのですが $("div.sideBox > div > ul > li > a").click(function(){ var value = this.href; console.log("varlue = " + value); }); としても値が獲得できません。 直接"sideBoxInner basename"classからたどれば上手くいくような気がするのですが クラス名に半角スペースがある場合、どのようにすればいいのでしょうか？

  • 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
  • firefox でjavascript が無効

    下記のようにjavascriptで場面の切り替えを行ったのですが、firefox 3.6で見ると切り替え表示されません。他にlightbox やjquery-1.4.4.min.js　などを使用していますが、取り除いて試したところやはり無効です。ＩＥでは正常に機能します。なにかよい方法はないでしょうか？ <script> function show1(){ content1.style.display="block"; content2.style.display="none"; } function show2(){ content1.style.display="none"; content2.style.display="block"; } </script> <style> #content1 { display:none; } #content2 { display:none; } </style> <ul class="u2" id="menu2"> <li><span onclick="show1();"><img src="images/menu1.jpg" alt="" border="0" /></span></li> <li><span onclick="show2();"><img src="images/menu2.jpg" alt="" border="0" /></span></li> </ul> <div id="content1"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>　 <div id="content2"> bbbbbbbbbbbbbbbbbbbbbbbbbb</div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する