- 締切済み
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>
- owo0223
- お礼率8% (3/37)
- JavaScript
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- tracer
- ベストアンサー率41% (255/621)
> 何とかできたのですが、こんな感じでいいのか不安です。 目的が「ul#portfolio内の項目数を6つに制限する」なのであれば、ひとまず動くんじゃないでしょうかね。 クリックの度に動作させているので、あまり効率よくありませんが。 ま、動いているのであればいいんじゃないですか。 私の前の回答をreadyのすぐ下の行あたりに書いても動くはずですよ。 1行で済みますし。 $("li","#portfolio").eq(5).nextAll().remove(); 質問者さんのコードは、 ・全部非表示にする。 ・必要分だけ表示 をクリックの度に繰り返しているというものですが、 私の回答は、 ・ページ読み込み時に、7つめ以降の項目を削除(非表示ではない)する。 というものでした。 参考までに。
- tracer
- ベストアンサー率41% (255/621)
スーパースペシャルミラクル読心術を使ってお応えするならば、要は、ul#portfolioのliを5つにしたいということかな。 それならば、 $("li","#portfolio").eq(4).nextAll().remove(); でいけますよ。
- fujillin
- ベストアンサー率61% (1594/2576)
同じく、質問の意味がさっぱりわかってない者ですが、 察するところ、いろいろな絞込みができればとりあえずの用には足りそうな… 当たるも八卦ということで、勝手に違うもの（代わり）を作成してみました。 ＞cssはデザインだけなので、使用はしていません ul内のクラス設定は使用していないと考えていいのですね？ その割には、コードではクラス設定をしたりしているのが疑問ですが、それは置いておいてクラスをキーワードに利用してしまうという案。 クリックしたリストのクラスとマッチするものが表示されます。 別にセットでリストを用意しておかなくても、チェックボックスなどで自由に組み合わせられる方が良さそうですが、リストの方がもとの形に近いということで…（当たるも八卦なので、原理のみのコードです） 「all」だけは特別な語として扱うようにしています。 ご提示のコードの、クラスを操作している部分は（↑）の「使用していない」ということから不要と見做して省き、また、コード中でreturn falseになっているので、リンクも不要と判断して省いています。 （以下、全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <script type="text/javascript"> <!-- $(document).ready(function(){ $("ul#navi li") .css({color:"#00f", cursor:"pointer"}) .click(function(){ var key = this.className.split(" "); var i = 0, k; while(k=key[i++]) if(k=="all") key = ["all"]; $("#portfolio li").each(function(){ var t = $(this), f = true; if(key[0] != "all") for(var i=0, n=key.length; i<n; i++) if(!t.hasClass(key[i])){ f = false; break; } if(f) t.fadeIn(); else t.fadeOut(); }); }); }); //--> </script> </head> <body> <ul id="navi"> <li class="all">全部</li> <li class="animal">動物</li> <li class="fish">魚</li> <li class="bird">鳥</li> <li class="large">大きいもの</li> <li class="middle dog">中型の犬</li> <li class="ocean fish">海の魚</li> <li class="africa large">アフリカの大きなもの</li> <li class="africa large bird">アフリカの大きな鳥</li> </ul> <ul id="portfolio"> <li class="animal elephant large africa">アフリカ象</li> <li class="animal elephant large asia">アジア像</li> <li class="animal giraffe large africa">キリン</li> <li class="animai dog middle asia">芝犬</li> <li class="animal dog middle europe">ドーベルマン</li> <li class="animal dog little america">チワワ</li> <li class="animal large ocean">シロナガスクジラ</li> <li class="fish little ocean">秋刀魚</li> <li class="fish little river">錦鯉</li> <li class="fish little ocean river">鮭</li> <li class="bird large africa">ダチョウ</li> <li class="bird middle america">コンドル</li> <li class="bird middle asia">トキ</li> </ul> </body> </html>
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 補足ありがとうございます。 読解力が無く申し訳ございません。何をしたいか伝わって来ません。 id="navi"のリンクを選択したらid="portfolio"の内容が表示されたり非表示になったりする動作なのでしょうか。 例えば、CMSをクリックするとil class="cms"が表示されたり非表示になったり。 で、質問のオールで6行とは何が6行なんでしょうか。 このスクリプトがこういう操作をしたらこうなるんです。 でも、こうしたいんだけどこうなってしまうんです。 具体的に何をしたときにどうなって、何をしたらどうしたいというのを補足いただけませんか。 キーワードとなっている 6行とは？ 記事とは？ これがわからないと何をアドバイスして良いかわかりかねます。 自分は仕様ややりたいことがわかっているのでしょうが、回答者は仕様、やりたいことわかりません。 補足いただく前にきちんと読み返して、これで伝わるかどうか確認してから補足してください。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 記事を6列って何のことを示しているのでしょうか。 5つ残して表示って何が5つ残るのでしょうか。 またCSSがどのような設定になっているかわからないので回答が難しいです。 何をどうしたいか、もうちょっと伝わるように補足お願いします、
補足
大変申し訳ございません！ ６行と言いたかったのですが、言葉が思いつかなく６列と書いてました。 cssはデザインだけなので、使用はしていません。 主にjQueryで操作を行なっています。 jQueryで、六行の制御をかけたいと思っております。 よろしくお願い致します。
関連するQ&A
- jQueryで６行表示のループ
大雑把な質問なのですが、自分でもわかっているのですが、 もっと簡単なやり方がないものかと色々とやっていたのですが、 ありませんでしょうか？ $(document).ready(function() { var nCnt2 = 1; var nMax2 = 6; if(nMax2 < $('ul#portfolio li').length) { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt2 <= nMax2) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt2++; }); } $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); var nCnt = 1; var nMax = 6; if(filterVal == 'all') { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt++; }); } else { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else if (nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); nCnt++; } }); } return false; }); });
- 締切済み
- JavaScript
- jquery ドロップダウン・メニュー
jquery ドロップダウン・メニュー ドロップダウン・メニューを作成しています。一番最後のtwitter部分だけにクリック動作を適用させたいのですが、 思うように表示が出来ません。 どうしたらいいのか、教えてください。 <script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('li.twitter').click(function() { if ($(this).hasClass('click')) { $(this).removeClass('click'); } else { $('.click').removeClass('click'); $(this).addClass('click'); } }); $('div.drop').hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); </script> <div id="feed"> <ul class="aux"> <li class="rss1"> <a href="http">RSS1</a> </li> <li class="rss2"> <a href="http">RSS2</a> </li> <li class="rss3"> <a href="http">RSS3</a> </li> <li class="twitter"> <a href="#"><span>Twitter</span></a> <div class="drop"> <p><strong>TW1</strong> <a href="http://www.twitter.com/●●" target="_blank"><img src="http://abcde/a.png" />Follow Me</a> </p> <p> <strong>TW2</strong> <a href="http://www.twitter.com/●●●●●" target="_blank"><img src="http://abcde/b.jpg" />Follow Me</a> </p> </div> </li> </ul> </div>
- ベストアンサー
- JavaScript
- jQueryプラグインのメガドロップダウンメニュー
jQueryプラグインのメガドロップダウンメニューについて 当方プログラミング初心者です。 至らない点ばかりですが、どうかご容赦ください。。。 この度、仕事でこのメガドロップダウンメニューを使用することになりました。 サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル（オンマウスすると車の写真などが出てくる） スタイルは(2)にある、白色のバー なのですが、どうもうまくいきません・・・ 上記サイトからダウンロードしたもの ・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。 英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですが バーの色は黒いままだし、まずドロップダウンしません。 今、この状態のまま詰まってしまっています・・・ たぶんめちゃくちゃになってしまっていると思うのですが、 どこが悪いのかわかりません・・・＞＜ ★ＨＴＭＬ（ヘッド） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ～～～ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★ＨＴＭＬ（ボディ） <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ～～～～～～～～省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★ＣＳＳ(1)（dcmegamenu.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★ＣＳＳ(2)（white.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・ どこが悪いのでしょうか・・・？ 私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、 どうか、お力添えをお願いできれば、、、、お願いします。
- 締切済み
- JavaScript
- 【JQuery】アコーディオンの入れ子について
アコーディオンの入れ子（多階層）について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。 入れ子の数は計3つを予定してます。（第3階層まで） 1～3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。（メニューを増やす度にIDが増えるのを止めたい） ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか？ （ID、CLASSのセレクタの振り方は上記以外でもかまいません） また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか？ （上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません） JavaScriptがよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。
- 締切済み
- JavaScript
- jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- jQueryタブメニュー内へのリンク方法。
javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- jQueryで２段式アコーディオンメニュー
いつも参考にさせて頂いております。 あるサイト様（http://triplexxx.jp/archives/150）を参考にjQueryで２段式のアコーディオンメニューを作成していましたが、何分初心者なもので早々に行き詰まってしまいました。 理想はこちらのサイト様（http://html-five.jp/pc/demo/002/）にあるデモの下側、『２段アコーディオン』をこちら（http://html-five.jp/demo/002/index2.html）の『ポンプ型アコーディオン』ような動きにしたいと思っております。 スクリプト自体を入れ子にしたりしてみましたが根本的な部分がダメなようでうまくいきませんでした。 何卒ご教授いただけますようお願いします。 [参考にしたjQuery（１段までは問題なく動きます）] script type="text/javascript"> var j$ = jQuery; j$(function(){ j$(".ac_parent").each(function(){ j$("li > a").each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); </script> [作成中のHTML] <div> <ul class="ac_parent"> <li><a href="#">1</a> <ul class="ac_child"> <li><a href="#">11</a></li> <ul class="ac_gchild"> <li><a href="#">111</a></li> <li><a href="#">112</a></li> <li><a href="#">113</a></li> </ul> <li><a href="#">12</a></li> <ul class="ac_gchild"> <li><a href="#">121</a></li> <li><a href="#">122</a></li> <li><a href="#">123</a></li> </ul> </ul> </li> <li><a href="#">2</a> <ul class="ac_child"> <li><a href="#">21</a></li> <ul class="ac_gchild"> <li><a href="#">211</a></li> <li><a href="#">212</a></li> <li><a href="#">213</a></li> </ul> <li><a href="#">22</a></li> <ul class="ac_gchild"> <li><a href="#">221</a></li> <li><a href="#">222</a></li> <li><a href="#">223</a></li> </ul> </ul> </li> <li><a href="#">3</a> <ul class="ac_child"> <li><a href="#">31</a></li> <ul class="ac_gchild"> <li><a href="#">311</a></li> <li><a href="#">312</a></li> <li><a href="#">313</a></li> </ul> <li><a href="#">32</a></li> <ul class="ac_gchild"> <li><a href="#">321</a></li> <li><a href="#">322</a></li> <li><a href="#">323</a></li> </ul> </ul> </li> </ul> </div>
- ベストアンサー
- JavaScript
- jQueryのアコーディオンメニュー 開閉の制御
jQueryのアコーディオンメニュー 開閉の制御 こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして （http://triplexxx.jp/archives/150） アコーディオンメニューを設置しました。 ページ遷移後でも、常に一番目のメニューが開いている状態なので、 選択しているページのメニューだけを開いている状態にしたいのですが どの部分を変更したらよいでしょうか？ javascriptの if(index > 0) $this.next().hide(); の部分が開閉の指示をしている箇所かなと思うのですが 新しいコードを書ける知識がないので、教えてください。 よろしくお願いします。 html ---------------------- <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> ---------------------- css ---------------------- ul.acc, ul.acc li ul { margin: 0; padding: 0; list-style: none; } ul.acc a{ display: block; height: 30px; line-height: 30px; color: #feffff; } ul.acc { background-color: #185AAC; } ul.acc li ul { background-color: #A6B5E2; } ---------------------- javascript ---------------------- var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); }); }); }); }); ----------------------
- ベストアンサー
- AJAX
- 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
補足
わからないなりにこういった感じ者を作りたいと思っていました。 何とかできたのですが、こんな感じでいいのか不安です。 $(document).ready(function() { var nCnt2 = 1; var nMax2 = 6; if(nMax2 < $('ul#portfolio li').length) { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt2 <= nMax2) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt2++; }); } $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); var nCnt = 1; var nMax = 6; if(filterVal == 'all') { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt++; }); } else { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else if (nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); nCnt++; } }); } return false; }); });