如何在一页上有多个选项卡式框

Question

I am struggling to get multiple instances of this tabbed box on one page. I am very new to jquery, and the code I have is copied. The tabbed box works fine, but multiple instances cause problems.

The 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 --> 

The 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;
}

And the 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>

See the jsfiddle !

I have multiple section tags on my page, and would like this tabbed box in each section.

Answer 1

Here is a working example of the Tabs you wish to have. Check out the code snippet. I hope that is what you are looking for.

 $(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 --> 

The issue was with display attribute in css