我需要在页面上有多个选项卡区域,目前它们一起工作,当您在其中一个选项卡上单击时,它会影响其他选项卡。
您可以在此处查看其工作方式:https://jsfiddle.net/pxpsvoc6/
我的html内容如下:
<div class="recom-content">
<ul class="tabs">
<li class="active" rel="overview1">Overview</li>
<li rel="prices1">Prices</li>
</ul>
<!--Close Tabs Menu-->
<div class="tab_container">
<h3 class="tab_drawer_heading" rel="overview1">Overview</h3>
<div id="overview1" class="tab_content">
<h2>Lamborghini</h2>
<h1>huracan</h1>
<hr>
<p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
<br>
<a href="#"><div class="buttona">Book Now</div></a>
</div>
<h3 class="tab_drawer_heading" rel="prices1">Prices</h3>
<div id="prices1" class="tab_content">
conetasd
</div>
</div>
<!--Close Tabs Container-->
</div>
<!--Close Recom Content-->
<div class="recom-content">
<ul class="tabs">
<li class="active" rel="overview2">Overview</li>
<li rel="prices2">Prices</li>
</ul>
<!--Close Tabs Menu-->
<div class="tab_container">
<h3 class="tab_drawer_heading" rel="overview2">Overview</h3>
<div id="overview2" class="tab_content">
<h2>Lamborghini</h2>
<h1>huracan</h1>
<hr>
<p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
<br>
<a href="#"><div class="buttona">Book Now</div></a>
</div>
<h3 class="tab_drawer_heading" rel="prices2">Prices</h3>
<div id="prices2" class="tab_content">
conetasd
</div>
</div>
<!--Close Tabs Container-->
</div>
<!--Close Recom Content-->
我的CSS:
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 50px;
width: 100%;
margin-bottom:10%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
height: 75px;
width:50%;
background-color: #000000;
overflow: hidden;
position: relative;
font-family: 'montserratlight';
font-size:15px;
line-height:75px;
color:#ffffff;
text-transform:uppercase;
text-align:center;
margin-bottom:10px;
letter-spacing:1px;
}
ul.tabs li:hover {
background-color:#525252;
color: #ffffff;
}
ul.tabs li.active {
background-color:#ffffff;
color: #000000;
display: block;
font-family: 'montserratregular';
}
.tab_container {
border-top: none;
clear: both;
float: left;
width: 400px;
background-color:#ffffff;
overflow: auto;
}
.tab_content {
padding: 10%;
display: none;
}
.tab_content h2 {
text-transform:uppercase;
letter-spacing:3px;
margin-bottom:4px;
}
.tab_content hr {
width:20%;
margin-left:0px;
margin-top:20px;
margin-bottom:20px;
border:1px solid #dadcdf;
}
.tab_content p:last-of-type {
margin-bottom:0px;
}
.recom-content {
width:200px;
height:auto;
display:table-cell;
vertical-align:top;
text-align:left;
border:1px solid #dadcdf;
}
.tab_drawer_heading { display: none; }
@media screen and (max-width: 768px) {
.tabs {
display: none;
}
.tab_drawer_heading {
font-family: 'montserratregular';
font-size:13px;
line-height:50px;
color:#ffffff;
text-transform:uppercase;
margin-bottom:10px;
letter-spacing:0px;
text-align:center;
background-color:#b1b8be;
margin: 0;
padding: 2px 0px;
display: block;
cursor: pointer;
border-bottom:1px solid #a8afb7;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.d_active {
background-color:#6f787e;
color: #fff;
}
}
JS:
// tabbed content
// http://www.entheosweb.com/tutorials/css/tabs.asp
$(".tab_content").hide();
$(".tab_content:first").show();
/* if in tab mode */
$("ul.tabs li").click(function() {
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});
/* Extra class "tab_last"
to add border to right side
of last tab */
$('ul.tabs li').last().addClass("tab_last");
$('.recom-content ul.tabs li').last().addClass("tab_last");
。请使用以下代码替换:$('.recom-content').find('ul.tabs li:last').addClass("tab_last");
。 - pistou