我希望在一个页面上有2个选项卡式部分。因为我使用的是SquareSpace，所以这两个部分需要共享一个CSS文件。我遇到的问题是这两个部分不能同时打开一个标签。
我试过了：
1）向部分添加类，然后使用CSS分别定位这些部分;和
2）将第二个表单上的选项卡和内容的编号更改为5,6,7,8,9而不是重复与第一个表单中相同的编号。这是有效的，但我需要将第一部分中的内容作为默认值checked。
感谢您的帮助！
HTML（这基本上是相同的形式，复制和粘贴两次）：
<main class="all_tabbed_only">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Text</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Media</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Games</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Services</label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5">Data</label>
<section id="content1">
<h3>Micro Purchase with Later Payment </h3>
<br>
<p>Sell all kinds of text</p>
<ul class="tabbed-list">
<li>Low entry barrier for users</li>
<li>Aggregation of purchases across multiple sellers</li>
<li>Payment only when reaching an invoice total of 5 Euro</li>
<li>Reduction of transaction costs</li>
<li>Flexible pricing between 0.05 and 5.00 Euro</li> </ul>
</section>
<section id="content2">
<h3>Time Limited Flatrate Access</h3>
<p>Time Passes grant users full access to a certain amount of content for a limited time. Scope and validity period of the Time Passes can freely be set. Time Passes do not renew automatically, but can be renewed by their user with just two clicks. </p>
<ul class="tabbed-list">
<li>Flexible scope and validity period</li>
<li>No automatic renewal</li>
<li>Easy two-click renewal</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>
</ul>
</section>
<section id="content3">
<h3>Single Item Purchase with Direct Payment</h3>
<p>Single Sale allows to sell higher priced content for 1.49 to 149.99 Euro. Users log in with their LaterPay account or register one and gain access to their purchases immediately after paying.</p>
<ul class="tabbed-list">
<li>Immediate payment</li>
<li>Immediate access to purchase</li>
<li>Flexible pricing between 1.49 and 149.99 Euro</li>
</ul>
</section>
<section id="content4">
<h3>Premium Complementary Content</h3>
<p>LaterPay allows to monetize complementary content for free content. Users can thus pay for further information and services that complements a free piece of content. We call it “Free-to-Read”: Reading is free, complementary content is available for a fee. </p>
<ul class="tabbed-list">
<li>Monetization of complementary content</li>
<li>Unrestricted access to main content</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>
</section>
<section id="content5">
<h3>Data</h3>
<p>Sell data </p>
<ul class="tabbed-list">
<li>Monetization of complementary content</li>
<li>Unrestricted access to main content</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>
</section>
</main>
<main class="all_tabbed_only">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Pay-Per-Use</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Time Pass</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Single Sale</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Free to Read</label>
<section id="content1">
<h3>Micro Purchase with Later Payment </h3>
<br>
<p>Use first and pay later. Pay-per-Use lets you buy with only two clicks and gives immediate access to the purchase.
Advance registration is not required. You only have to pay when reaching an invoice total of 5 Euro across multiple sellers.
Small prices lower the barrier to entry for paying for content. At the same time the collective invoice lowers the transaction costs and enables selling content at a profit for as little as 5 cent.</p>
<ul class="tabbed-list">
<li>Low entry barrier for users</li>
<li>Aggregation of purchases across multiple sellers</li>
<li>Payment only when reaching an invoice total of 5 Euro</li>
<li>Reduction of transaction costs</li>
<li>Flexible pricing between 0.05 and 5.00 Euro</li> </ul>
</section>
<section id="content2">
<h3>Time Limited Flatrate Access</h3>
<p>Time Passes grant users full access to a certain amount of content for a limited time. Scope and validity period of the Time Passes can freely be set. Time Passes do not renew automatically, but can be renewed by their user with just two clicks. </p>
<ul class="tabbed-list">
<li>Flexible scope and validity period</li>
<li>No automatic renewal</li>
<li>Easy two-click renewal</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>
</ul>
</section>
<section id="content3">
<h3>Single Item Purchase with Direct Payment</h3>
<p>Single Sale allows to sell higher priced content for 1.49 to 149.99 Euro. Users log in with their account or register one and gain access to their purchases immediately after paying.</p>
<ul class="tabbed-list">
<li>Immediate payment</li>
<li>Immediate access to purchase</li>
<li>Flexible pricing between 1.49 and 149.99 Euro</li>
</ul>
</section>
<section id="content4">
<h3>Premium Complementary Content</h3>
<p>This allows to monetize complementary content for free content. Users can thus pay for further information and services that complements a free piece of content. We call it “Free-to-Read”: Reading is free, complementary content is available for a fee. </p>
<ul class="tabbed-list">
<li>Monetization of complementary content</li>
<li>Unrestricted access to main content</li>
<li>Flexible pricing between 0.05 and 149.99 Euro</li>
</section>
</main>
这就是CSS：
<style>@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
.tabbed-list {
margin-left: 5%;
}
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #eee;
}
/*
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
*/
p {
margin: 0 0 20px;
line-height: 1.5;
}
main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16b'; }
label[for*='4']:before { content: '\f1a9'; }
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 3px solid #765743;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5
{
display: block;
}
li:before {
font-family: 'squarespace-ui-font';
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
display: inline-block;
vertical-align: middle;
speak: none;
content: "\e019";
margin-right:5px;
}
li {list-style-type: none;}
@media screen and (max-width: 650px) {
/* label {
font-size: 0;
} */
label:before {
margin: 0;
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
</style>
答案 0 :(得分：1)
我在您的代码中发现的错误：
将第二组无线电命名与第一组不同，并更改第二组无线电的INPUT和DIV的ID，我已经开始工作了。