- ベストアンサー
liの並び順の変更方法とは？
Taiyonoshizukuの回答
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
class="b"が最後に来ればいいんだよね。 <li class="b">のクローン作って元のを削除してulにappendじゃだめなの？ clone(true)でイベント引き継げると思うけど
関連するQ&A
- <li>の正しい使い方について
<li>の使い方についてなんですが、 <ul> <li class= "a"></li> <li class= "b"></li> <li class= "c"></li> </ul> みたいに、異なったコンテンツ(文章や画像、図表など)も<ul>で一括りにして、cssで<li>単位の整形するのって使い方として間違ってますか? 異なったコンテンツごとに<ul>か<div>など使うべきなのでしょうか?
- ベストアンサー
- HTML
- <li>内の<ul>を横に表示する方法
<li>内の<ul>を横に表示する方法がわからずに困っています。 例えば <ul> <li>野菜 <ul> <li>大根 <li>にんじん </ul> </li> <li>果物 <ul> <li>りんご <li>バナナ </ul> </li> </ul> これを以下のように表示させたいのです。 ・野菜 ・大根 ・にんじん ・くだもの ・りんご ・ばなな この場合、CSSはどのように記載すればいいのでしょうか。 ご存知の方、ご教授頂けると幸いです。
- ベストアンサー
- HTML
- ul li を inlineにすると、右から順にリスト表示されます
いつもお世話になっております。 基本的なことかもしれませんが、解決できずに困っているので どなたかアドバイスを頂けませんでしょうか。 希望はA,B,Cを左から順に並べて表示させたいのですが、 現在C,B,A となってしまっています。 (希望： A B C 現在： C B A) ---- html ---- <div class="link"> <ul> <li><img src="A.gif"></li> <li><img src="B.gif"></li> <li><img src="C.gif"></li> </ul> </div> ---- css ---- .link ul, li { display: inline; float: right; } これ以降、他の個所（別のclassなど）でul記述しても 全て同様の現象が起きております。 何が原因と考えられますでしょうか？
- ベストアンサー
- HTML
- classの中の<a>タグにidを追加
div class内のaタグにidを追加できる方法がないかを模索しておりますが、検索では直に（タグ）にidやclassを追加する方法しか出てきませんでした。 もしかしたら、突拍子もないことを言っているかもしれませんが JavaScriptに詳しい方アドバイス宜しくお願い致します。 id、classを割り当てるためのメソッド attr(属性, 属性値) $(function(){ $('ul').attr('id', 'style-ul'); $('li').attr('class', 'style-li');}
- ベストアンサー
- JavaScript
- 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
- 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
- jQueryのコードで分からない箇所があります
プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)
- ベストアンサー
- SE・インフラ・Webエンジニア
- ul liのclass指定について
表示が上手くいかないのでお助け下さい。 ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、 なぜかclass指定をすると画像が消えてしまいます。 class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。 どなたか教えて頂けないでしょうか？ また、申し訳ありませんがとりあえず表示されれば良いだけなので htmlやcssの記述に対する細かいツッこみは勘弁して下さい。 宜しくお願いします！ 【html】 <div id="side"> <ul id="sidenav"> <li class="a"><a href="test.html">test</a></li> </ul> </div> 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; text-align:center; background:#fff; } div#side ul#sidenav { list-style-type:none; border: none; } div#side ul#sidenav li.a { background:url(../common/side.gif) no-repeat left; background-position: 6px 11px; } div#side li { position:relative; width: 165px; height:40px; padding: 1px; margin: 5px; text-align:left; border: 1px solid #8c8c8c; }
- ベストアンサー
- CSS
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
- 同じ行の中で重複するデータを削除してつめる方法
A B C D E F １｜りんご｜いちご｜りんご｜ぶどう｜ばなな｜りんご ２｜すもも｜ばなな｜ ３｜りんご｜りんご｜びわ ｜ ４｜かき ｜りんご｜ばなな｜ データが上記のように記入されている場合、 下記のように、同じ行の中で重複するデータを削除してつめる方法をご伝授ください。 A B C D E F １｜りんご｜いちご｜ぶどう｜ばなな｜ ２｜すもも｜ばなな｜ ３｜りんご｜びわ ｜ ４｜かき ｜りんご｜ばなな｜ よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
お礼
イベント引き継げる方法があることを分かっていませんでした。 clone(true)の使用で何とかなりそうです。 ありがとうございました！