質問編集履歴

4 コードの追記

asami12 score 10

2017/03/08 20:30  投稿

別ページにあるCSSで作成されたタブを開いた状態で表示させたい

###前提・実現したいこと

・Aページにあるボタンをクリックしたら別ページ（Bページ）にあるCSSで作成されたタブを開いた状態で表示

・アンカーリンクでCSSのみで作成されたラジオボタンを使用したタブの特定のタブを開いた状態でリンクさせたい

Aページにあるボタン

```HTML

<a href="sample.html" class="btn proBt1">詳しく見る</a>

<a href="sample.html" class="btn proBt2">詳しく見る</a>

<a href="sample.html" class="btn proBt3">詳しく見る</a>

```

CSSのみで作成されたタブは下記です。（Bページ）

```HTML

<!-- TABS LIST -->

<ul id="tabs-list">

<!-- MENU TOGGLE -->

<label id="open-nav-label" for="nav-ctrl"></label>

<li id="li-for-panel-1">

<label class="panel-label" for="panel-1-ctrl">タブ 1</label>

</li>

<li id="li-for-panel-2">

<label class="panel-label" for="panel-2-ctrl">タブ 2</label>

</li>

<li id="li-for-panel-3">

<label class="panel-label" for="panel-3-ctrl">タブ 3</label>

</li>

<label id="close-nav-label" for="nav-ctrl">Close</label>

</ul>

<!-- THE PANELS -->

<article id="panels">

<div class="container">

<section id="panel-1"><!-- ▼タブ 1 -->

<main>

<p>コンテンツ 1</p>

</main>

</section>

<section id="panel-2"><!-- ▼タブ 2 -->

<main>

<p>コンテンツ 2</p>

</main>

</section>

<section id="panel-3"><!-- ▼タブ 3 -->

<main>

<p>コンテンツ 3</p>

</main>

</section>

</div><!-- /container▲ -->

</article>

```

```CSS

ul#tabs-list {

list-style: none;

text-align: center;

border-bottom: 1px solid #dfdfdf;

margin: 0;

padding: 0;

}

label.panel-label {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

display: block;

width: 100%;

color: #bdc3c7;

cursor: pointer;

background-color: #ecf0f1;

-webkit-transition-property: border-top, background-color, color;

transition-property: border-top, background-color, color;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

label.panel-label:hover {

color: #c0392b;

}

#panels {

background-color: white;

}

#panels .container {

margin: 0 auto;

width: 90%;

}

#panels section header label.panel-label {

padding: 12px 24px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#panels section main {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

max-height: 0;

opacity: 0;

-webkit-transition: opacity 600ms;

transition: opacity 600ms;

overflow-y: hidden;

}

#panel-1-ctrl:checked ~ #panels #panel-1 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-2-ctrl:checked ~ #panels #panel-2 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-3-ctrl:checked ~ #panels #panel-3 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

@media all and (max-width: 767px) {

#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#open-nav-label {

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

cursor: pointer;

}

#nav-ctrl:checked ~ #tabs-list #open-nav-label {

display: none;

}

#close-nav-label {

display: block;

max-height: 0;

overflow-y: hidden;

background-color: #444444;

color: #ecf0f1;

padding: 0px;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

cursor: pointer;

text-transform: uppercase;

font-size: 12px;

line-height: 22px;

letter-spacing: 1px;

}

#nav-ctrl:checked ~ #tabs-list #close-nav-label {

max-height: 36px;

opacity: 1;

padding: 12px 24px;

}

#tabs-list {

position: relative;

}

#tabs-list label.panel-label {

padding: 12px 0;

}

#tabs-list #li-for-panel-1 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-2 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-3 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panels .container {

width: 100%;

}

#panels section header {

display: block;

}

}

@media all and (min-width: 768px) {

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {

border-left: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {

border-left: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {

border-left: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

ul#tabs-list {

text-align: center;

border-bottom: 1px solid #dfdfdf;

}

ul#tabs-list li {

display: inline-block;

text-align: center;

font-size: 0.875em;

width: 18%;

-webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

border-top: 1px solid #dfdfdf;

border-right: 1px solid #dfdfdf;

-webkit-transition-property: border-top;

transition-property: border-top;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

ul#tabs-list li:hover {

border-top: none;

border-right: none;

}

ul#tabs-list li:hover:last-of-type {

border-right: 1px solid #dfdfdf;

}

ul#tabs-list li:hover + li {

border-left: 1px solid #dfdfdf;

}

ul#tabs-list li label.panel-label {

border-top: 0px solid #c0392b;

padding: 24px 0;

}

ul#tabs-list li label.panel-label:hover {

border-top-width: 6px;

padding-top: 25px;

}

#open-nav-label,

#close-nav-label {

display: none;

}

#nav-ctrl {

display: none;

}

}

@media all and (min-width: 900px) {

main {

width: 70%;

margin: 0 auto;

}

}

.panel-radios {

position: fixed;

left: 50%;

top: 10px;

width: 20px;

opacity: 0.5;

z-index: 99;

}

.panel-radios:nth-child(1) {

-webkit-transform: translateX(-50px);

-ms-transform: translateX(-50px);

transform: translateX(-50px);

}

.panel-radios:nth-child(2) {

-webkit-transform: translateX(-30px);

-ms-transform: translateX(-30px);

transform: translateX(-30px);

}

.panel-radios:nth-child(3) {

-webkit-transform: translateX(-10px);

-ms-transform: translateX(-10px);

transform: translateX(-10px);

}

```

###試したこと

```js

$(document).ready(function() {

$(".proBt2").click(function() {

$(".panel-2").trigger('click');

});

});

```

もしくは

```ｊｓ

$(document).on('click', element, function(event) {

var target = $(event.currentTarget);

target.find('input[type=radio]').attr('checked', true);

});

```

```js

$('.hoge').on('click', function(){

$(this).find('input[type=radio]').attr('checked', true);

});

```

こんな感じでスクリプトで表現できるかと思ったのですが勉強中の私にはどうすればいいのか分かりません。

何か解決策があればご教授頂きたいです。

よろしくお願いいたします。

HTML 13903 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9290 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 jQuery 9398 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加

3 説明詳細

asami12 score 10

2017/03/08 20:28  投稿

別ページにあるCSSで作成されたタブを開いた状態で表示させたい

###前提・実現したいこと

・Aページにあるボタンをクリックしたら別ページ（Bページ）にあるCSSで作成されたタブを開いた状態で表示

・アンカーリンクでCSSのみで作成されたラジオボタンを使用したタブの特定のタブを開いた状態でリンクさせたい

Aページにあるボタン

```HTML

<a href="sample.html" class="btn proBt1">詳しく見る</a>

<a href="sample.html" class="btn proBt2">詳しく見る</a>

<a href="sample.html" class="btn proBt3">詳しく見る</a>

```

上記をクリックしたら別ページにあるCSSで作成されたタブを開いた状態で表示させたいです。

CSSのみで作成されたタブは下記です。

CSSのみで作成されたタブは下記です。（Bページ）

```HTML

<!-- TABS LIST -->

<ul id="tabs-list">

<!-- MENU TOGGLE -->

<label id="open-nav-label" for="nav-ctrl"></label>

<li id="li-for-panel-1">

<label class="panel-label" for="panel-1-ctrl">タブ 1</label>

</li>

<li id="li-for-panel-2">

<label class="panel-label" for="panel-2-ctrl">タブ 2</label>

</li>

<li id="li-for-panel-3">

<label class="panel-label" for="panel-3-ctrl">タブ 3</label>

</li>

<label id="close-nav-label" for="nav-ctrl">Close</label>

</ul>

<!-- THE PANELS -->

<article id="panels">

<div class="container">

<section id="panel-1"><!-- ▼タブ 1 -->

<main>

<p>コンテンツ 1</p>

</main>

</section>

<section id="panel-2"><!-- ▼タブ 2 -->

<main>

<p>コンテンツ 2</p>

</main>

</section>

<section id="panel-3"><!-- ▼タブ 3 -->

<main>

<p>コンテンツ 3</p>

</main>

</section>

</div><!-- /container▲ -->

</article>

```

```CSS

ul#tabs-list {

list-style: none;

text-align: center;

border-bottom: 1px solid #dfdfdf;

margin: 0;

padding: 0;

}

label.panel-label {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

display: block;

width: 100%;

color: #bdc3c7;

cursor: pointer;

background-color: #ecf0f1;

-webkit-transition-property: border-top, background-color, color;

transition-property: border-top, background-color, color;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

label.panel-label:hover {

color: #c0392b;

}

#panels {

background-color: white;

}

#panels .container {

margin: 0 auto;

width: 90%;

}

#panels section header label.panel-label {

padding: 12px 24px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#panels section main {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

max-height: 0;

opacity: 0;

-webkit-transition: opacity 600ms;

transition: opacity 600ms;

overflow-y: hidden;

}

#panel-1-ctrl:checked ~ #panels #panel-1 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-2-ctrl:checked ~ #panels #panel-2 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-3-ctrl:checked ~ #panels #panel-3 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

@media all and (max-width: 767px) {

#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#open-nav-label {

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

cursor: pointer;

}

#nav-ctrl:checked ~ #tabs-list #open-nav-label {

display: none;

}

#close-nav-label {

display: block;

max-height: 0;

overflow-y: hidden;

background-color: #444444;

color: #ecf0f1;

padding: 0px;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

cursor: pointer;

text-transform: uppercase;

font-size: 12px;

line-height: 22px;

letter-spacing: 1px;

}

#nav-ctrl:checked ~ #tabs-list #close-nav-label {

max-height: 36px;

opacity: 1;

padding: 12px 24px;

}

#tabs-list {

position: relative;

}

#tabs-list label.panel-label {

padding: 12px 0;

}

#tabs-list #li-for-panel-1 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-2 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-3 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panels .container {

width: 100%;

}

#panels section header {

display: block;

}

}

@media all and (min-width: 768px) {

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {

border-left: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {

border-left: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {

border-left: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

ul#tabs-list {

text-align: center;

border-bottom: 1px solid #dfdfdf;

}

ul#tabs-list li {

display: inline-block;

text-align: center;

font-size: 0.875em;

width: 18%;

-webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

border-top: 1px solid #dfdfdf;

border-right: 1px solid #dfdfdf;

-webkit-transition-property: border-top;

transition-property: border-top;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

ul#tabs-list li:hover {

border-top: none;

border-right: none;

}

ul#tabs-list li:hover:last-of-type {

border-right: 1px solid #dfdfdf;

}

ul#tabs-list li:hover + li {

border-left: 1px solid #dfdfdf;

}

ul#tabs-list li label.panel-label {

border-top: 0px solid #c0392b;

padding: 24px 0;

}

ul#tabs-list li label.panel-label:hover {

border-top-width: 6px;

padding-top: 25px;

}

#open-nav-label,

#close-nav-label {

display: none;

}

#nav-ctrl {

display: none;

}

}

@media all and (min-width: 900px) {

main {

width: 70%;

margin: 0 auto;

}

}

.panel-radios {

position: fixed;

left: 50%;

top: 10px;

width: 20px;

opacity: 0.5;

z-index: 99;

}

.panel-radios:nth-child(1) {

-webkit-transform: translateX(-50px);

-ms-transform: translateX(-50px);

transform: translateX(-50px);

}

.panel-radios:nth-child(2) {

-webkit-transform: translateX(-30px);

-ms-transform: translateX(-30px);

transform: translateX(-30px);

}

.panel-radios:nth-child(3) {

-webkit-transform: translateX(-10px);

-ms-transform: translateX(-10px);

transform: translateX(-10px);

}

```

###試したこと

```JS

```js

$(document).ready(function() {

$(".proBt2").click(function() {

$(".panel-2").trigger('click');

});

});

```

もしくは

```ｊｓ

$(document).on('click', element, function(event) {

var target = $(event.currentTarget);

target.find('input[type=radio]').attr('checked', true);

});

```

こんな感じでスクリプトで表現できるかと思ったのですが勉強中の私にはどうすればいいのか分かりません。

何か解決策があればご教授頂きたいです。

よろしくお願いいたします。

HTML 13903 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9290 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 jQuery 9398 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加

2 コードの修正

asami12 score 10

2017/03/08 10:44  投稿

別ページにあるCSSで作成されたタブを開いた状態で表示させたい

###前提・実現したいこと

```HTML

<a class="btn proBt1">詳しく見る</a>

<a class="btn proBt2">詳しく見る</a>

<a class="btn proBt3">詳しく見る</a>

<a href="sample.html" class="btn proBt1">詳しく見る</a>

<a href="sample.html" class="btn proBt2">詳しく見る</a>

<a href="sample.html" class="btn proBt3">詳しく見る</a>

```

上記をクリックしたら別ページにあるCSSで作成されたタブを開いた状態で表示させたいです。

CSSのみで作成されたタブは下記です。

```HTML

<!-- TABS LIST -->

<ul id="tabs-list">

<!-- MENU TOGGLE -->

<label id="open-nav-label" for="nav-ctrl"></label>

<li id="li-for-panel-1">

<label class="panel-label" for="panel-1-ctrl">タブ 1</label>

</li>

<li id="li-for-panel-2">

<label class="panel-label" for="panel-2-ctrl">タブ 2</label>

</li>

<li id="li-for-panel-3">

<label class="panel-label" for="panel-3-ctrl">タブ 3</label>

</li>

<label id="close-nav-label" for="nav-ctrl">Close</label>

</ul>

<!-- THE PANELS -->

<article id="panels">

<div class="container">

<section id="panel-1"><!-- ▼タブ 1 -->

<main>

<p>コンテンツ 1</p>

</main>

</section>

<section id="panel-2"><!-- ▼タブ 2 -->

<main>

<p>コンテンツ 2</p>

</main>

</section>

<section id="panel-3"><!-- ▼タブ 3 -->

<main>

<p>コンテンツ 3</p>

</main>

</section>

</div><!-- /container▲ -->

</article>

```

```CSS

ul#tabs-list {

list-style: none;

text-align: center;

border-bottom: 1px solid #dfdfdf;

margin: 0;

padding: 0;

}

label.panel-label {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

display: block;

width: 100%;

color: #bdc3c7;

cursor: pointer;

background-color: #ecf0f1;

-webkit-transition-property: border-top, background-color, color;

transition-property: border-top, background-color, color;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

label.panel-label:hover {

color: #c0392b;

}

#panels {

background-color: white;

}

#panels .container {

margin: 0 auto;

width: 90%;

}

#panels section header label.panel-label {

padding: 12px 24px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#panels section main {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

max-height: 0;

opacity: 0;

-webkit-transition: opacity 600ms;

transition: opacity 600ms;

overflow-y: hidden;

}

#panel-1-ctrl:checked ~ #panels #panel-1 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-2-ctrl:checked ~ #panels #panel-2 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-3-ctrl:checked ~ #panels #panel-3 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

@media all and (max-width: 767px) {

#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#open-nav-label {

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

cursor: pointer;

}

#nav-ctrl:checked ~ #tabs-list #open-nav-label {

display: none;

}

#close-nav-label {

display: block;

max-height: 0;

overflow-y: hidden;

background-color: #444444;

color: #ecf0f1;

padding: 0px;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

cursor: pointer;

text-transform: uppercase;

font-size: 12px;

line-height: 22px;

letter-spacing: 1px;

}

#nav-ctrl:checked ~ #tabs-list #close-nav-label {

max-height: 36px;

opacity: 1;

padding: 12px 24px;

}

#tabs-list {

position: relative;

}

#tabs-list label.panel-label {

padding: 12px 0;

}

#tabs-list #li-for-panel-1 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-2 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-3 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panels .container {

width: 100%;

}

#panels section header {

display: block;

}

}

@media all and (min-width: 768px) {

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {

border-left: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {

border-left: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {

border-left: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

ul#tabs-list {

text-align: center;

border-bottom: 1px solid #dfdfdf;

}

ul#tabs-list li {

display: inline-block;

text-align: center;

font-size: 0.875em;

width: 18%;

-webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

border-top: 1px solid #dfdfdf;

border-right: 1px solid #dfdfdf;

-webkit-transition-property: border-top;

transition-property: border-top;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

ul#tabs-list li:hover {

border-top: none;

border-right: none;

}

ul#tabs-list li:hover:last-of-type {

border-right: 1px solid #dfdfdf;

}

ul#tabs-list li:hover + li {

border-left: 1px solid #dfdfdf;

}

ul#tabs-list li label.panel-label {

border-top: 0px solid #c0392b;

padding: 24px 0;

}

ul#tabs-list li label.panel-label:hover {

border-top-width: 6px;

padding-top: 25px;

}

#open-nav-label,

#close-nav-label {

display: none;

}

#nav-ctrl {

display: none;

}

}

@media all and (min-width: 900px) {

main {

width: 70%;

margin: 0 auto;

}

}

.panel-radios {

position: fixed;

left: 50%;

top: 10px;

width: 20px;

opacity: 0.5;

z-index: 99;

}

.panel-radios:nth-child(1) {

-webkit-transform: translateX(-50px);

-ms-transform: translateX(-50px);

transform: translateX(-50px);

}

.panel-radios:nth-child(2) {

-webkit-transform: translateX(-30px);

-ms-transform: translateX(-30px);

transform: translateX(-30px);

}

.panel-radios:nth-child(3) {

-webkit-transform: translateX(-10px);

-ms-transform: translateX(-10px);

transform: translateX(-10px);

}

```

###試したこと

```JS

$(document).ready(function() {

$(".proBt2").click(function() {

$(".panel-2").trigger('click');

});

});

```

こんな感じでスクリプトで表現できるかと思ったのですが勉強中の私にはどうすればいいのか分かりません。

何か解決策があればご教授頂きたいです。

よろしくお願いいたします。

HTML 13903 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9290 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 jQuery 9398 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加

1 コードの修正

asami12 score 10

2017/03/08 10:41  投稿

別ページにあるCSSで作成されたタブを開いた状態で表示させたい

###前提・実現したいこと

```HTML

<a class="btn">詳しく見る</a>

<a class="btn proBt1">詳しく見る</a>

<a class="btn proBt2">詳しく見る</a>

<a class="btn proBt3">詳しく見る</a>

```

上記をクリックしたら別ページにあるCSSで作成されたタブを開いた状態で表示させたいです。

CSSのみで作成されたタブは下記です。

```HTML

<!-- TABS LIST -->

<ul id="tabs-list">

<!-- MENU TOGGLE -->

<label id="open-nav-label" for="nav-ctrl"></label>

<li id="li-for-panel-1">

<label class="panel-label" for="panel-1-ctrl">タブ 1</label>

</li>

<li id="li-for-panel-2">

<label class="panel-label" for="panel-2-ctrl">タブ 2</label>

</li>

<li id="li-for-panel-3">

<label class="panel-label" for="panel-3-ctrl">タブ 3</label>

</li>

<label id="close-nav-label" for="nav-ctrl">Close</label>

</ul>

<!-- THE PANELS -->

<article id="panels">

<div class="container">

<section id="panel-1"><!-- ▼タブ 1 -->

<main>

<p>コンテンツ 1</p>

</main>

</section>

<section id="panel-2"><!-- ▼タブ 2 -->

<main>

<p>コンテンツ 2</p>

</main>

</section>

<section id="panel-3"><!-- ▼タブ 3 -->

<main>

<p>コンテンツ 3</p>

</main>

</section>

</div><!-- /container▲ -->

</article>

```

```CSS

ul#tabs-list {

list-style: none;

text-align: center;

border-bottom: 1px solid #dfdfdf;

margin: 0;

padding: 0;

}

label.panel-label {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

display: block;

width: 100%;

color: #bdc3c7;

cursor: pointer;

background-color: #ecf0f1;

-webkit-transition-property: border-top, background-color, color;

transition-property: border-top, background-color, color;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

label.panel-label:hover {

color: #c0392b;

}

#panels {

background-color: white;

}

#panels .container {

margin: 0 auto;

width: 90%;

}

#panels section header label.panel-label {

padding: 12px 24px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#panels section main {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

max-height: 0;

opacity: 0;

-webkit-transition: opacity 600ms;

transition: opacity 600ms;

overflow-y: hidden;

}

#panel-1-ctrl:checked ~ #panels #panel-1 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-2-ctrl:checked ~ #panels #panel-2 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

#panel-3-ctrl:checked ~ #panels #panel-3 main {

max-height: initial;

opacity: 1;

padding: 48px 24px;

}

@media all and (max-width: 767px) {

#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#open-nav-label {

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

cursor: pointer;

}

#nav-ctrl:checked ~ #tabs-list #open-nav-label {

display: none;

}

#close-nav-label {

display: block;

max-height: 0;

overflow-y: hidden;

background-color: #444444;

color: #ecf0f1;

padding: 0px;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

cursor: pointer;

text-transform: uppercase;

font-size: 12px;

line-height: 22px;

letter-spacing: 1px;

}

#nav-ctrl:checked ~ #tabs-list #close-nav-label {

max-height: 36px;

opacity: 1;

padding: 12px 24px;

}

#tabs-list {

position: relative;

}

#tabs-list label.panel-label {

padding: 12px 0;

}

#tabs-list #li-for-panel-1 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-2 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#tabs-list #li-for-panel-3 {

max-height: 0;

overflow-y: hidden;

-webkit-transition: max-height 200ms;

transition: max-height 200ms;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

max-height: 46px;

opacity: 1;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

max-height: 46px;

opacity: 1;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

max-height: 46px;

opacity: 1;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

background-color: #c0392b;

color: white;

}

#panels .container {

width: 100%;

}

#panels section header {

display: block;

}

}

@media all and (min-width: 768px) {

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {

border-left: 1px solid #dfdfdf;

}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {

border-left: 1px solid #dfdfdf;

}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {

pointer-events: none;

cursor: default;

-webkit-transform: translate(0, 1px);

-ms-transform: translate(0, 1px);

transform: translate(0, 1px);

-webkit-box-shadow: none;

box-shadow: none;

border-top: none;

border-right: none;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {

border-right: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {

border-left: 1px solid #dfdfdf;

}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {

background-color: white;

color: #c0392b;

border-top: 6px solid #c0392b;

padding-top: 26px;

}

ul#tabs-list {

text-align: center;

border-bottom: 1px solid #dfdfdf;

}

ul#tabs-list li {

display: inline-block;

text-align: center;

font-size: 0.875em;

width: 18%;

-webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);

border-top: 1px solid #dfdfdf;

border-right: 1px solid #dfdfdf;

-webkit-transition-property: border-top;

transition-property: border-top;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

}

ul#tabs-list li:hover {

border-top: none;

border-right: none;

}

ul#tabs-list li:hover:last-of-type {

border-right: 1px solid #dfdfdf;

}

ul#tabs-list li:hover + li {

border-left: 1px solid #dfdfdf;

}

ul#tabs-list li label.panel-label {

border-top: 0px solid #c0392b;

padding: 24px 0;

}

ul#tabs-list li label.panel-label:hover {

border-top-width: 6px;

padding-top: 25px;

}

#open-nav-label,

#close-nav-label {

display: none;

}

#nav-ctrl {

display: none;

}

}

@media all and (min-width: 900px) {

main {

width: 70%;

margin: 0 auto;

}

}

.panel-radios {

position: fixed;

left: 50%;

top: 10px;

width: 20px;

opacity: 0.5;

z-index: 99;

}

.panel-radios:nth-child(1) {

-webkit-transform: translateX(-50px);

-ms-transform: translateX(-50px);

transform: translateX(-50px);

}

.panel-radios:nth-child(2) {

-webkit-transform: translateX(-30px);

-ms-transform: translateX(-30px);

transform: translateX(-30px);

}

.panel-radios:nth-child(3) {

-webkit-transform: translateX(-10px);

-ms-transform: translateX(-10px);

transform: translateX(-10px);

}

```

###試したこと

```JS

$(document).ready(function() {

$(".proBt2").click(function() {

$(".panel-2").trigger('click');

});

});

```

こんな感じでスクリプトで表現できるかと思ったのですが勉強中の私にはどうすればいいのか分かりません。

何か解決策があればご教授頂きたいです。

よろしくお願いいたします。

HTML 13903 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9290 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 jQuery 9398 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加