- ベストアンサー
どの<li><a>が押されたか判別したい
- 家計簿のカテゴリーを作成している際、<li>要素の中でどの<a>が押されたかを判別し、そのテキストを取得する方法について質問します。
- <select>要素の場合には「selectedIndex」を使用して選択されたメニューの配列番号を取得することができますが、<li>要素の場合には同様の方法があるのか疑問です。
- また、<li>要素の個数は固定ではなく、JavaScriptを使用してカテゴリーの追加や削除が可能になる予定です。
- zukky_saito
- お礼率34% (9/26)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
関連するQ&A
- li ３列表示
こんにちは、 下記のliを3列づつ表示したいのですが、 どのようにすればよいでしょうか？ （２列とかはあるのですが・・・tableにすべき？） <ul id="leftlist1"> <li><a href="#">a1</a></li> <li><a href="#">a2</a></li> <li><a href="#">a3</a></li> </ul> <ul id="leftlist2"> <li><a href="#">b1</a></li> <li><a href="#">b2</a></li> <li><a href="#">b3</a></li> </ul> <ul id="leftlist3"> <li><a href="#">c1</a></li> <li><a href="#">c2</a></li> <li><a href="#">c3</a></li> </ul>
- ベストアンサー
- CSS
- IE8でli:hoverが効かない
Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- 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
- <li>タグでメニューを作った場合
横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。 サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか
- ベストアンサー
- CSS
- <li>タグを連続しようで IEで変な表示がされる
html上で下記のようなものを連続で使用したら 変なところにテキスト内容が出てきてしまっています。 IE６とIE７だけに見られる症状のようで ご存知の方いらっしゃいましたらご回答お願い致します。 <ul> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> </ul> <ul> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> <li><a href="#">テキストが入ります。</a></li> </ul>
- ベストアンサー
- HTML
- <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
- IE7で <li> の一部が消える
IE7で横並びの<li>の一部が消えます。（Firefoxでは大丈夫） パソコンのフォントや大きさにもよると思うのですが 2列目の右側の「けけけ・・・」が消えます！ 「くくく」や「けけけ」に半角でも足したり削除すれば現れたり 右側に「けけけ」がギリギリにハマるかハマらない様な微妙な場合に出る現象です。 HTMLの書き方等が間違っているのでしょうか？ <html> <head> <style type="text/css"> <!-- .xxx{ margin: 0 auto; width: 797px; background: #000;} .xxx ul{ margin: 0 0 0 12px; padding:0; list-style: none; font-weight: bold; line-height: 2;} .xxx li{ float: left; margin: 5px; text-align: center; white-space: nowrap;} .xxx a{ color: #FFF; text-decoration: none; border:1px solid #999; padding: 4px 5px 1px; } --> </style> </head> <body> <div class="xxx"> <ul> <li><img src="http://www.okweb.ne.jp/images/logo_top.gif" width="200" height="125" alt="OK"></li> <li><a href="index.html">ああああああ ああ</a></li> <li><a href="index.html">いいいいいい</a></li> <li><a href="index.html">ううううう</a></li> <li><a href="index.html">えええええ</a></li> <li><a href="index.html">おおおおおお</a></li> <li><a href="index.html">かかかかかかかか</a></li> <li><a href="index.html">きききききききき</a></li> <li><a href="index.html">くくくくくくくくくくくくく</a></li> <li><a href="index.html">けけけけけけ</a></li> <li><a href="index.html">ここここここ</a></li> <li><a href="index.html">さささささ</a></li> </ul> <br style="clear:both"> </div> </body></html>
- ベストアンサー
- HTML
- <li>要素の追加方法
プログラムの最初で <ul id="list"> <li></li><li></li><li></li> </ul> と書いておいて、javascript内でこの<li></li>の中に site_names = ["1","2"]; site_urls = [" http://oshiete.goo.ne.jp/"," http://www.google. co.jp/"]; のような配列の要素やリンクを要素の追加をするにはどうしたら良いのでしょうか。
- 締切済み
- JavaScript
- jQueryで記事を６列表示にしたいのです。
ｊQueryで記事を６列表示にしたいのです。 jQueryで６列表示をしたいと思って試行錯誤をしていたのですが、 全くわからずじまいで、どうしたらいいのかと知恵袋に投稿致しました。 各カテゴリごとに表示をするようになっているのですが、 オールだけ全て表示になります。 ５つ残して表示させればいいのですが、各カテゴリが 消えてしまうので、どうしてもオールは６行表示させたいと思っています。 どなたか助けていただけませんでしょうか？ jQuery ---------------------------------------------- $(document).ready(function() { $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else { $(this).fadeIn('slow').removeClass('hidden'); } }); } return false; }); }); HTML ---------------------------------------------- <ul id="navi"> <li class="all"><a href="#">All</a></li> <li><a href="#">CMS</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> <ul id="portfolio"> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">prototype</a></li> <li class="css"><a href="#">CSSビギナー</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">plugin</a></li> </ul>
- 締切済み
- JavaScript
- Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
