teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

li -> div

2019/10/02 15:27

投稿

kokemomo.sour
kokemomo.sour

スコア330

answer CHANGED
@@ -6,4 +6,106 @@
6
6
  padding:0px;
7
7
  }
8
8
  ```
9
- とするといかがですか
9
+ とするといかがですか
10
+
11
+
12
+ 追記:
13
+ 以下だといかがでしょうか
14
+
15
+ ```
16
+ <div class="wrapper">
17
+ <p class="message">↓のボタンをクリックしてください↓</p>
18
+ <div class="sortNav">
19
+ <div class="btnGreen">Green</div>
20
+ <div class="btnRed">Red</div>
21
+ <div class="btnBlue">Blue</div>
22
+ <div class="btnAll">All</div>
23
+ </div>
24
+ <div class="container">
25
+ <div class="green">sample</div>
26
+ <div class="blue">sample</div>
27
+ <div class="red">sample</div>
28
+ <div class="green">sample</div>
29
+ <div class="blue">sample</div>
30
+ <div class="red">sample</div>
31
+ <div class="green">sample</div>
32
+ <div class="blue">sample</div>
33
+ <div class="red">sample</div>
34
+ <div class="green">sample</div>
35
+ <div class="blue">sample</div>
36
+ <div class="red">sample</div>
37
+ <div class="green">sample</div>
38
+ <div class="blue">sample</div>
39
+ <div class="red">sample</div>
40
+ </div>
41
+ </div>
42
+
43
+ <style>
44
+ .wrapper {
45
+ width:600px;
46
+ margin: 30px auto;
47
+ }
48
+ .message {
49
+ margin-bottom: 10px;
50
+ }
51
+ .sortNav {
52
+ overflow: hidden;
53
+ margin-bottom: 30px;
54
+ }
55
+ .sortNav div {
56
+ list-style:none;
57
+ float: left;
58
+ margin-left: 10px;
59
+ color: #fff;
60
+ font-weight: bold;
61
+ padding: 5px 10px;
62
+ cursor: pointer;
63
+ border-radius: 15px;
64
+ }
65
+ .green,.blue,.red {
66
+ width: 50px;
67
+ height: 50px;
68
+ line-height: 50px;
69
+ verticel-align: middle;
70
+ text-align: center;
71
+ margin: 10px;
72
+ font-size: 10px;
73
+ color: #fff;
74
+ float: left;
75
+ }
76
+ .green, .btnGreen {
77
+ background-color: #238C00;
78
+
79
+ }
80
+ .blue, .btnBlue {
81
+ background-color: #00f;
82
+ }
83
+ .red, .btnRed {
84
+ background-color: #f00;
85
+ }
86
+ .btnAll {
87
+ background-color: #999;
88
+ }
89
+ </style>
90
+ <script
91
+ src="https://code.jquery.com/jquery-3.4.1.min.js"
92
+ integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
93
+ crossorigin="anonymous"></script>
94
+ <script>
95
+ $(function(){
96
+ $('.sortNav div').each(function(){
97
+ $(this).click(function(){
98
+ var btnName = $(this).attr("class").substring(3).toLowerCase();
99
+ var className = '.';
100
+ className += btnName;
101
+ if(btnName == 'all') {
102
+ $('.container > div').fadeIn(200);
103
+ } else {
104
+ $('.container div:not(className)').hide();
105
+ $(className).fadeIn(200);
106
+ }
107
+ });
108
+ });
109
+ });
110
+ </script>
111
+ ```