我怎樣才能在一個頁面上有多個標籤框

Question

我很努力地在一個頁面上獲得這個標籤框的多個實例。我對jquery非常陌生，並且我擁有的代碼被複制。選項卡式框可以正常工作，但多個實例會導致問題。

的HTML：

<ul class="tabs"> 
    <li class="active" rel="tab1"> Single Wall Cases</li> 
    <li rel="tab2">Double Wall Cases</li> 
    <li rel="tab3">Heavy Duty Cases</li> 
    <li rel="tab4">Wardrobe Cartons</li> 
    <li rel="tab5">Archive Boxes</li> 
    <li rel="tab6">Stitched Wallets</li> 
</ul> 

<div class="tab_container"> 

<div id="tab1" class="tab_content"> 

    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
    <strong> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
    </strong> 
    </p> 

</div><!-- #tab1 --> 
<div id="tab2" class="tab_content"> 

    <p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br /> 
    <strong> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
    </strong> 
    </p> 

</div><!-- #tab2 --> 
<div id="tab3" class="tab_content"> 

    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
    <strong> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
    </strong> 
    </p> 

</div><!-- #tab3 --> 
<div id="tab4" class="tab_content"> 

    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
    <strong> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
    </strong> 
    </p> 

</div><!-- #tab4 --> 

<div id="tab5" class="tab_content"> 

    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
    <strong> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
    </strong> 
    </p> 

</div><!-- #tab5 --> 


<div id="tab6" class="tab_content"> 

    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
    <strong> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
    </strong> 
    </p> 

</div><!-- #tab6 --> 

的CSS：

ul.tabs { 
margin-top: 0; 
margin-right: 0; 
margin-left: 0; 
margin-bottom: 0; 
padding: 0; 
float: left; 
list-style: none; 
height: 32px; 
/* [disabled]border-bottom: 1px solid #999999; */ 
/* [disabled]border-left: 1px solid #999999; */ 
width: 100%; 
} 
ul.tabs li { 
margin-top: 0; 
margin-right: 0; 
margin-left: 2px; 
margin-bottom: 0; 
cursor: pointer; 
padding: 0px 21px; 
height: 31px; 
line-height: 31px; 
border-color: rgba(37,37,37,1.00); 
border-left-style: solid; 
/* [disabled]border-right-style: solid; */ 
/* [disabled]border-bottom-style: solid; */ 
/* [disabled]border-top-style: solid; */ 
border-width: 1px; 
overflow: hidden; 
position: relative; 
font-family: abel; 
font-style: normal; 
font-weight: 400; 
color: rgba(37,37,37,1.00); 
float: left; 
} 
ul.tabs li:hover { 
background: #CCCCCC; 
color: rgba(37,37,37,1.00); 
} 
ul.tabs li.active{ 
background-color: #8DDF2D; 
border-bottom: 1px solid #FFFFFF; 
color: rgba(37,37,37,1.00); 
} 
.tab_container { 
border: 1px solid #999999; 
clear: both; 
float: left; 
width: 100%; 
background: #FFFFFF; 
} 
.tab_content { 
padding: 20px; 
font-size: 1.2em; 
display: none; 
} 


@media (max-width: 600px){ 
ul.tabs li { 
padding-top: 0px; 
padding-right: 2px; 
padding-left: 2px; 
padding-bottom: 0px; 
margin: 0; 
font-size: 77%; 
float: none; 
width: 92px; 
} 
ul.tabs { 
} 
.tab_container { 
margin-top: 175px; 
} 

而且Jquery的：

<script type="text/javascript"> 

$(document).ready(function() { 

$(".tab_content").hide(); 
$(".tab_content:first").show(); 

$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn(); 
}); 
}); 

</script> 

見jsfiddle！

我在我的頁面上有多個章節標籤，並且希望每個章節中都有這個標籤框。

Answer 1

以下是您希望擁有的選項卡的示例。查看代碼片段。我希望那是你正在尋找的。

$(document).ready(function() { 
 

 
$(".tab_content").hide(); 
 
$(".tab_content:first").show(); 
 

 
$("ul.tabs li").click(function() { 
 
    $("ul.tabs li").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    $(".tab_content").hide(); 
 
    var activeTab = $(this).attr("rel"); 
 
    $("#"+activeTab).fadeIn(); 
 
}); 
 
});

ul.tabs { 
 
margin-top: 0; 
 
margin-right: 0; 
 
margin-left: 0; 
 
margin-bottom: 0; 
 
padding: 0; 
 
float: left; 
 
list-style: none; 
 
height: 32px; 
 
/* [disabled]border-bottom: 1px solid #999999; */ 
 
/* [disabled]border-left: 1px solid #999999; */ 
 
width: 100%; 
 
} 
 
ul.tabs li { 
 
margin-top: 0; 
 
margin-right: 0; 
 
margin-left: 2px; 
 
margin-bottom: 0; 
 
cursor: pointer; 
 
padding: 0px 21px; 
 
height: 31px; 
 
line-height: 31px; 
 
    display:inline; 
 
border-color: rgba(37,37,37,1.00); 
 
border-left-style: solid; 
 
/* [disabled]border-right-style: solid; */ 
 
/* [disabled]border-bottom-style: solid; */ 
 
/* [disabled]border-top-style: solid; */ 
 
border-width: 1px; 
 
overflow: hidden; 
 
position: relative; 
 
font-family: abel; 
 
font-style: normal; 
 
font-weight: 400; 
 
color: rgba(37,37,37,1.00); 
 
float: left; 
 
} 
 
ul.tabs li:hover { 
 
background: #CCCCCC; 
 
color: rgba(37,37,37,1.00); 
 
} 
 
ul.tabs li.active{ 
 
background-color: #8DDF2D; 
 
border-bottom: 1px solid #FFFFFF; 
 
color: rgba(37,37,37,1.00); 
 
} 
 
.tab_container { 
 
border: 1px solid #999999; 
 
clear: both; 
 
float: left; 
 
width: 100%; 
 
background: #FFFFFF; 
 
} 
 
.tab_content { 
 
padding: 20px; 
 
font-size: 1.2em; 
 
display: none; 
 
} 
 

 

 
@media (max-width: 600px){ 
 
ul.tabs li { 
 
padding-top: 0px; 
 
padding-right: 2px; 
 
padding-left: 2px; 
 
padding-bottom: 0px; 
 
margin: 0; 
 
font-size: 77%; 
 
float: none; 
 
width: 92px; 
 
} 
 
ul.tabs { 
 
} 
 
.tab_container { 
 
margin-top: 175px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tabs"> 
 
    <li class="active" rel="tab1"> Single Wall Cases</li> 
 
    <li rel="tab2">Double Wall Cases</li> 
 
    <li rel="tab3">Heavy Duty Cases</li> 
 
    <li rel="tab4">Wardrobe Cartons</li> 
 
    <li rel="tab5">Archive Boxes</li> 
 
    <li rel="tab6">Stitched Wallets</li> 
 
</ul> 
 

 
<div class="tab_container"> 
 

 
<div id="tab1" class="tab_content"> 
 

 
    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
 
    <strong> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
 
    </strong> 
 
    </p> 
 

 
</div><!-- #tab1 --> 
 
<div id="tab2" class="tab_content"> 
 

 
    <p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br /> 
 
    <strong> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
 
    </strong> 
 
    </p> 
 

 
</div><!-- #tab2 --> 
 
<div id="tab3" class="tab_content"> 
 

 
    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
 
    <strong> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
 
    </strong> 
 
    </p> 
 

 
</div><!-- #tab3 --> 
 
<div id="tab4" class="tab_content"> 
 

 
    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
 
    <strong> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
 
    </strong> 
 
    </p> 
 

 
</div><!-- #tab4 --> 
 

 
<div id="tab5" class="tab_content"> 
 

 
    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
 
    <strong> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
 
    </strong> 
 
    </p> 
 

 
</div><!-- #tab5 --> 
 

 

 
<div id="tab6" class="tab_content"> 
 

 
    <p><img src="../images/round images/boxes1.png" width="200"> <br /> 
 
    <strong> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare. 
 
    </strong> 
 
    </p> 
 

 
</div><!-- #tab6 -->

的問題是在CSS中display屬性