回答編集履歴

3

文言の修正

2019/02/21 12:27

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -1,4 +1,4 @@
1
- 元のスクリプトだとタブを絞り込む関数がロード時しか読み込まれないので、記事本数の調節ができなくなっています。ですので、ロード時と表示する数調整を行うクリックイベント発生時にタブを絞り込むようにしないといけません。
1
+ 元のスクリプトだとタブを絞り込む関数がロード時しか読み込まれないので、記事本数の調節ができなくなっています。ですので、ロード時と記事選択のクリックイベント発生時にタブを絞り込むようにしないといけません。
2
2
 
3
3
 
4
4
 

2

jQueryのはりつけ

2019/02/21 12:27

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -1,7 +1,67 @@
1
- 元のスクリプトだとタブを絞り込む関数がロード時しか読み込まれないので、記事本数の調節ができなくなっています。ですので、ロード時と表示する数の調整を行うときにタブを絞り込むようにしないといけません。
1
+ 元のスクリプトだとタブを絞り込む関数がロード時しか読み込まれないので、記事本数の調節ができなくなっています。ですので、ロード時と表示する数の調整を行うクリックイベント発生時にタブを絞り込むようにしないといけません。
2
2
 
3
3
 
4
4
 
5
5
  また、自分が作ってみたサンプルをリンクしておきます。クラス名とリンク名が紐付いているので、あとはそのクラスの記事のうち、上位3回だけをループすれば簡単に取得できますよ。
6
6
 
7
7
  [タブコンテンツのテスト](http://motoflabo.s500.xrea.com/tabtest.html)
8
+
9
+
10
+
11
+ ```jQuery
12
+
13
+ $(function(){
14
+
15
+ /*------------------
16
+
17
+ 表示する数の調整
18
+
19
+ --------------------*/
20
+
21
+ // tabBtnとselClassは同じ値なので紐づけできる
22
+
23
+
24
+
25
+ //絞り込みを行う関数
26
+
27
+ displayTopics = function(selClass){
28
+
29
+ $("#number_list").each(function(){
30
+
31
+ $('.main-contents > li').hide(); //最初に全要素を隠す
32
+
33
+ for( var num = 0; num < 3 ; num++){
34
+
35
+ $("." + selClass).eq(num).show(); //該当するクラスに対し、表示させたい3回だけ回す
36
+
37
+ }
38
+
39
+ })
40
+
41
+ }
42
+
43
+ /*----------------
44
+
45
+ タブ内容の絞込み
46
+
47
+ ------------------*/
48
+
49
+ $('.main-contents > li').addClass('js-filter-all');
50
+
51
+ displayTopics('js-filter-all'); //ロード時の絞り込み
52
+
53
+ //イベント時の絞り込み
54
+
55
+ $('.main-top > li a').click(function(){
56
+
57
+ var tabBtn = $(this).attr('href');
58
+
59
+ displayTopics(tabBtn);
60
+
61
+ return false;
62
+
63
+ });
64
+
65
+ });
66
+
67
+ ```

1

リンクを修正

2019/02/21 12:23

投稿

FKM
FKM

スコア3608

test CHANGED
@@ -4,4 +4,4 @@
4
4
 
5
5
  また、自分が作ってみたサンプルをリンクしておきます。クラス名とリンク名が紐付いているので、あとはそのクラスの記事のうち、上位3回だけをループすれば簡単に取得できますよ。
6
6
 
7
- http://motoflabo.s500.xrea.com/tabtest.html
7
+ [タブコンテンツのテスト](http://motoflabo.s500.xrea.com/tabtest.html)