0
私はCSSで動作しているタブを使用しています。私はそれを変更しながらページをリロードするタブを作る必要があります。たとえば、私がタブ2をクリックした場合には、/リフレッシュページをロードすると、アクティブなタブ2.タブを変更中にページを読み込む
は、ここに私のhtmlです:
<main>
<input id="tab1" type="radio" name="tabs" >
<label for="tab1"><img src="img/india_640.png" width="30">INDIA</label>
<input id="tab2" type="radio" name="tabs" checked>
<label for="tab2"><img src="img/Flag_of_Australia.png" width="30">AUSTRALIA</label>
<section id="content1">
content 1
</section>
<section id="content2">
Content 2
</section>
</main>
、ここでは、CSSです:
.tabs-origin main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
.tabs-origin section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabs-origin input {
display: none;
}
.tabs-origin label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.tabs-origin label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
/*
.tabs-origin label[for*='1']:before { content: '\f1cb'; }
.tabs-origin label[for*='2']:before { content: '\f17d'; }
.tabs-origin label[for*='3']:before { content: '\f16b'; }
.tabs-origin label[for*='4']:before { content: '\f1a9'; }
*/
.tabs-origin label:hover {
color: #888;
cursor: pointer;
}
.tabs-origin input:checked + label {
color: #555;
border-left: 1px solid #ddd;
border-top: 2px solid #EA4C88;
border-right: 1px solid #ddd;
}
.tabs-origin #tab1:checked ~ #content1,
.tabs-origin #tab2:checked ~ #content2,
.tabs-origin #tab3:checked ~ #content3,
.tabs-origin #tab4:checked ~ #content4 {
display: block;
}
@media screen and (max-width: 650px) {
.tabs-origin label {
font-size: 0;
}
.tabs-origin label:before {
margin: 0;
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
.tabs-origin label {
padding: 15px;
}
}
あなたはこのタブの作業を見つけることができます:http://baby-nameo.com/australia.php
おかげ
タブを変更するときにページをリロードする場合は、タブをリンクにするだけではどうですか? '' –
私たちは既にaustralia.phpに入っています。なぜそれがページをロードするのですか?それは動作していません –
考える!あなたが_india_ページにいてこれをしているとどうなりますか?あなたがオーストラリアのページにいて、_india_タブ/リンクをクリックしている場合はどうなりますか? :facepalm:タブとしてリンクを行うとき、私はそれが意味がないので、とにかく_current_タブのリンクを除外します。そして、 "それは働いていません" - こことNitishの答えは有益ではありません。推測の代わりに答えが必要な場合は*** ***に詳細を記入する必要があります。 –