CSSで作成したタブ切り替えメニューでページ内リンクができずに躓いております。

いつもお世話になっております。

下記サイトのコードを参考にしてタブ切り替えメニューを作成しました。
http://qiita.com/takanorip/items/078682784ddab03d1c4e

しかし一つ問題が...

Tab1のページ内リンクでTab2のページにリンクしたいのですが
どうすれば移動できるか...行き詰まっております＞＜

もしくは、ページ内リンクをクリックすると
Tab2を開ければいいです...

申し訳ございません。
ご教授頂ければ幸いでございますm(_ _)m

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        label.panel-label {
8            -webkit-user-select: none;
9            -moz-user-select: none;
10            -ms-user-select: none;
11            user-select: none;
12            display: block;
13            width: 100%;
14            color: #bdc3c7;
15            cursor: pointer;
16            background-color: #ecf0f1;
17            -webkit-transition-property: background-color, color;
18            transition-property: background-color, color;
19            -webkit-transition-duration: 200ms;
20            transition-duration: 200ms;
21        }
22
23        label.panel-label:hover {
24            color: #003399;
25        }
26
27        #panels {
28            background-color: white;
29        }
30
31        #panels .container {
32            margin: 0 auto;
33            width: 90%;
34        }
35
36        #panels section header label.panel-label {
37            padding: 12px 24px;
38            box-sizing: border-box;
39        }
40
41        #panels section main {
42            box-sizing: border-box;
43            max-height: 0;
44            opacity: 0;
45            -webkit-transition: opacity 600ms;
46            transition: opacity 600ms;
47            overflow-y: hidden;
48        }
49
50        #panel-1-ctrl:checked ~ #panels #panel-1 main {
51            max-height: initial;
52            opacity: 1;
53            padding: 48px 24px;
54        }
55
56        #panel-2-ctrl:checked ~ #panels #panel-2 main {
57            max-height: initial;
58            opacity: 1;
59            padding: 48px 24px;
60        }
61
62        #panel-3-ctrl:checked ~ #panels #panel-3 main {
63            max-height: initial;
64            opacity: 1;
65            padding: 48px 24px;
66        }
67
68        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
69            pointer-events: none;
70            cursor: default;
71            -webkit-transform: translate3d(0, 1px, 0);
72            transform: translate3d(0, 1px, 0);
73            box-shadow: none;
74            border-right: none;
75        }
76
77        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
78            border-right: 1px solid transparent;
79        }
80
81        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
82            border-left: 1px solid #dfdfdf;
83        }
84
85        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
86            background-color: white;
87            color: #003399;
88            padding-top: 24px;
89        }
90
91        #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {
92            height: 6px;
93        }
94
95        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
96            pointer-events: none;
97            cursor: default;
98            -webkit-transform: translate3d(0, 1px, 0);
99            transform: translate3d(0, 1px, 0);
100            box-shadow: none;
101            border-right: none;
102        }
103
104        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
105            border-right: 1px solid transparent;
106        }
107
108        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
109            border-left: 1px solid #dfdfdf;
110        }
111
112        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
113            background-color: white;
114            color: #003399;
115            padding-top: 24px;
116        }
117
118        #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {
119            height: 6px;
120        }
121
122        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
123            pointer-events: none;
124            cursor: default;
125            -webkit-transform: translate3d(0, 1px, 0);
126            transform: translate3d(0, 1px, 0);
127            box-shadow: none;
128            border-right: none;
129        }
130
131        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {
132            border-right: 1px solid transparent;
133        }
134
135        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
136            border-left: 1px solid #dfdfdf;
137        }
138
139        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
140            background-color: white;
141            color: #003399;
142            padding-top: 24px;
143        }
144
145        #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {
146            height: 6px;
147        }
148
149        ul#tabs-list {
150            display: flex;
151            list-style: none;
152            text-align: center;
153            border-bottom: 1px solid #dfdfdf;
154            margin: 0;
155            padding: 0;
156        }
157
158        ul#tabs-list li {
159            text-align: center;
160            font-size: 0.875em;
161            width: 18%;
162            box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
163            border-right: 1px solid #dfdfdf;
164            position: relative;
165        }
166
167        ul#tabs-list li:hover {
168            -webkit-transition: none;
169            transition: none;
170            border-right: none;
171        }
172
173        ul#tabs-list li:hover.last {
174            border-right: 1px solid transparent;
175        }
176
177        ul#tabs-list li:hover + li {
178            border-left: 1px solid #dfdfdf;
179        }
180
181        ul#tabs-list li label.panel-label {
182            position: relative;
183            padding: 24px 0;
184            font-size: 0.875em;
185        }
186
187        ul#tabs-list li label.panel-label::after {
188            content: "";
189            position: absolute;
190            width: 100%;
191            left: 0;
192            bottom: 100%;
193            background-color: #003399;
194            height: 0;
195            -webkit-transition-property: height;
196            transition-property: height;
197            -webkit-transition-duration: 200ms;
198            transition-duration: 200ms;
199        }
200
201        ul#tabs-list li label.panel-label:hover {
202            padding-top: 24px;
203        }
204
205        ul#tabs-list li label.panel-label:hover::after {
206            height: 6px;
207        }
208
209        main {
210            width: 70%;
211            margin: 0 auto;
212        }
213
214        .panel-radios {
215            display: none;
216        }
217
218        body {
219            background: #00bfff;
220            color: #444444;
221        }
222
223        main p {
224            line-height: 1.8;
225        }
226
227    </style>
228</head>
229<body>
230<!-- TAB CONTROLLERS -->
231<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
232<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
233<input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios">
234
235<!-- TABS LIST -->
236<ul id="tabs-list">
237    <!-- MENU TOGGLE -->
238    <li id="li-for-panel-1">
239        <label class="panel-label" for="panel-1-ctrl">Tab1</label>
240    </li><!--INLINE-BLOCK FIX-->
241    <li id="li-for-panel-2">
242        <label class="panel-label" for="panel-2-ctrl">Tab2</label>
243    </li><!--INLINE-BLOCK FIX-->
244    <li id="li-for-panel-3">
245        <label class="panel-label" for="panel-3-ctrl">Tab3</label>
246    </li><!--INLINE-BLOCK FIX-->
247</ul>
248
249<!-- THE PANELS -->
250<article id="panels">
251    <div class="container">
252        <section id="panel-1">
253            <main>
254                <p>Content1</p>
255                <a href="#" id="button1">クリック</a>
256            </main>
257        </section>
258        <section id="panel-2">
259            <main>
260                <p>Content2</p>
261            </main>
262        </section>
263        <section id="panel-3">
264            <main>
265                <p>Content3</p>
266            </main>
267        </section>
268    </div>
269</article>
270<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
271<script>
272    $("#button1").on("click", function () {
273        $("#panel-2-ctrl").prop("checked", true);
274        return false;
275    });
276</script>
277</body>
278</html>

投稿2017/07/12 10:44

s8_chu

総合スコア14731

退会済みユーザー

2017/07/12 11:08 編集

早速のご回答ありがとうございます！試しました所、ページ移動できました！ありがとうございます！ごめんなさい、もう一つわがままを言うと下記<article>内の様にコンテンツ内が長くなるとページ移動時も下の方にリンクしてしまします。。これをTab2の上に移動する事は難しいでしょうか？＞＜ ``` <article id="panels"> <div class="container"> <section id="panel-1"> <main> Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 <a href="#" id="button1">クリック</a> </main> </section> <section id="panel-2"> <main> Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 </main> </section> <section id="panel-3"> <main> Content3 </main> </section> </div> </article> ```

s8_chu

2017/07/12 12:25 編集

回答文のscript要素の内容を以下のように変更することで実現できると思います。 ``` $("#button1").on("click", function () { $("#panel-2-ctrl").prop("checked", true); $("html, body").animate({scrollTop: 0}, "normal", "swing"); return false; }); ```

退会済みユーザー

2017/07/12 12:22

ご回答ありがとうございます！！試してみましたが、変化しないようです＞＜難しいでしょうか？（汗）

s8_chu

2017/07/12 12:23

こちらでは「Tab2の上に移動する」という動作を確認できました。間違いがないか手元のソースコードをもう一度確認してみてください。また、キャッシュの消去(http://portal.tac-school.co.jp/faq_system/?id=38)を行ってからもう一度確認してみると変化があるかもしれません。

退会済みユーザー

2017/07/12 12:23

htmlをbodyに変えると動作しました！！誠にありがとうございました！！ ``` $("#button1").on("click", function () { $("#panel-2-ctrl").prop("checked", true); $("html").animate({scrollTop: 0}, "normal", "swing"); return false; }); ```

s8_chu

2017/07/12 12:25

2017/07/12 20:18のコメントのコードを編集しました。ご確認ください。

退会済みユーザー

2017/07/12 12:30

確認させて頂きました！本当に助かりました。ありがとうございましたm(_ _)m 天才です。

行動規範の内容に同意します