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

質問編集履歴

4

コードの追記

2017/03/08 11:30

投稿

asami12
asami12

スコア12

title CHANGED
File without changes
body CHANGED
@@ -408,8 +408,12 @@
408
408
  target.find('input[type=radio]').attr('checked', true);
409
409
  });
410
410
  ```
411
+ ```js
412
+ $('.hoge').on('click', function(){
413
+ $(this).find('input[type=radio]').attr('checked', true);
414
+ });
415
+ ```
411
416
 
412
-
413
417
  こんな感じでスクリプトで表現できるかと思ったのですが勉強中の私にはどうすればいいのか分かりません。
414
418
  何か解決策があればご教授頂きたいです。
415
419
  よろしくお願いいたします。

3

説明詳細

2017/03/08 11:30

投稿

asami12
asami12

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,18 @@
1
1
  ###前提・実現したいこと
2
+
3
+ ・Aページにあるボタンをクリックしたら別ページ(Bページ)にあるCSSで作成されたタブを開いた状態で表示
4
+
5
+ ・アンカーリンクでCSSのみで作成されたラジオボタンを使用したタブの特定のタブを開いた状態でリンクさせたい
6
+
7
+
8
+ Aページにあるボタン
2
9
  ```HTML
3
10
  <a href="sample.html" class="btn proBt1">詳しく見る</a>
4
11
  <a href="sample.html" class="btn proBt2">詳しく見る</a>
5
12
  <a href="sample.html" class="btn proBt3">詳しく見る</a>
6
13
  ```
7
- 上記をクリックしたら別ページにあるCSSで作成されたタブを開いた状態で表示させたいです。
8
14
 
9
- CSSのみで作成されたタブは下記です。
15
+ CSSのみで作成されたタブは下記です。(Bページ)
10
16
  ```HTML
11
17
  <!-- TABS LIST -->
12
18
  <ul id="tabs-list">
@@ -387,14 +393,23 @@
387
393
  ```
388
394
 
389
395
  ###試したこと
390
- ```JS
396
+ ```js
391
397
  $(document).ready(function() {
392
398
  $(".proBt2").click(function() {
393
399
  $(".panel-2").trigger('click');
394
400
  });
395
401
  });
396
402
  ```
403
+ もしくは
397
404
 
405
+ ```js
406
+ $(document).on('click', element, function(event) {
407
+ var target = $(event.currentTarget);
408
+ target.find('input[type=radio]').attr('checked', true);
409
+ });
410
+ ```
411
+
412
+
398
413
  こんな感じでスクリプトで表現できるかと思ったのですが勉強中の私にはどうすればいいのか分かりません。
399
414
  何か解決策があればご教授頂きたいです。
400
415
  よろしくお願いいたします。

2

コードの修正

2017/03/08 11:28

投稿

asami12
asami12

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,8 @@
1
1
  ###前提・実現したいこと
2
2
  ```HTML
3
- <a class="btn proBt1">詳しく見る</a>
3
+ <a href="sample.html" class="btn proBt1">詳しく見る</a>
4
- <a class="btn proBt2">詳しく見る</a>
4
+ <a href="sample.html" class="btn proBt2">詳しく見る</a>
5
- <a class="btn proBt3">詳しく見る</a>
5
+ <a href="sample.html" class="btn proBt3">詳しく見る</a>
6
6
  ```
7
7
  上記をクリックしたら別ページにあるCSSで作成されたタブを開いた状態で表示させたいです。
8
8
 

1

コードの修正

2017/03/08 01:44

投稿

asami12
asami12

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,8 @@
1
1
  ###前提・実現したいこと
2
2
  ```HTML
3
- <a class="btn">詳しく見る</a>
3
+ <a class="btn proBt1">詳しく見る</a>
4
+ <a class="btn proBt2">詳しく見る</a>
5
+ <a class="btn proBt3">詳しく見る</a>
4
6
  ```
5
7
  上記をクリックしたら別ページにあるCSSで作成されたタブを開いた状態で表示させたいです。
6
8