之前已经涉及到道歉，但我找不到具体的......
我是JQuery的新手，并创建了一些效果很好的选项卡式内容框，但是，我知道所使用的代码效率不如预期的那么高！
有没有办法可以优化下面的代码，这样我就不必指定每个标签按钮和每个标签内容了？
提前感谢您的帮助！代码如下：）
HTML
<div id="tabs">
<div id="tabbed-buttons">
<div id="tb" class="tb1">
Plumbing
</div>
<div id="tb" class="tb2">
Heating
</div>
<div id="tb" class="tb3">
Underfloor Heating
</div>
<div id="tb" class="tb4">
Renewable Energy
</div>
</div>
<div id="tabbed-content">
<div id="tc1">
Text for tabbed content 1
</div>
<div id="tc2">
Text for tabbed content 2
</div>
<div id="tc3">
Text for tabbed content 3
</div>
<div id="tc4">
Text for tabbed content 4
</div>
</div>
</div>
JQUERY
// ---------- ---------- Tabbed Content ---------- ----------
$(document).ready(function(){
$("#tc2, #tc3, #tc4").hide();
$(".tb1").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1").click(function()
{
$("#tc1").show();
$("#tc2, #tc3, #tc4").hide();
$(".tb1").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb2, .tb3, .tc4").css({background:"auto",color:"#444"});
});
$(".tb2").click(function()
{
$("#tc1, #tc3, ¢tc4").hide();
$("#tc2").show();
$(".tb2").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1, .tb3, .tc4").css({background:"auto",color:"#444"});
});
$(".tb3").click(function()
{
$("#tc1, #tc2, #tc4").hide();
$("#tc3").show();
$(".tb3").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1, .tb2, .tb4").css({background:"auto",color:"#444"});
});
$(".tb4").click(function()
{
$("#tc1, #tc2, #tc3").hide();
$("#tc4").show();
$(".tb4").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1, .tb2, .tb3").css({background:"auto",color:"#444"});
});
});
答案 0 :(得分：2)
<强> HTML
观察按钮的ID与内容之间的对应关系。
id =“tab-1”对应于id =“content-tab-1”等。
<div id="tabs">
<div id="tabbed-buttons">
<div id="tab-1">Plumbing</div>
<div id="tab-2">Heating</div>
<div id="tab-3">Underfloor Heating</div>
<div id="tab-4">Renewable Energy</div>
</div>
<div id="tabbed-content">
<div id="content-tab-1">Text for tabbed content 1</div>
<div id="content-tab-2">Text for tabbed content 2</div>
<div id="content-tab-3">Text for tabbed content 3</div>
<div id="content-tab-4">Text for tabbed content 4</div>
</div>
</div>
<强> CSS
将活动按钮的css放在一个类中。根据需要添加你的风格......
.active {
background: #4867ad;
color: #fff;
}
<强> JQUERY
$(function(){
$("#tabbed-buttons").on("click", "div", function() {
// Remove active class from all tab buttons
$('#tabbed-buttons div').removeClass('active');
// Add active class to clicked button
$(this).addClass('active');
// Hide all content divs
$('#tabbed-content div').hide();
// Show the one that corresponds to clicked button
$('#content-' + $(this).prop('id')).show();
});
$("#tab-1").click(); // Init by clicking in 1st buton
});
答案 1 :(得分：0)
这是一种“制表”给定内容的方法。您不必向内容元素添加ID：
function TabbedNav() {
// Select all the articles and hide them
var allArticles = $('div.articlesContainer').children('article');
$(allArticles).hide();
// Show the first article
$(allArticles[0]).show();
// Add class "active" to first tab
var allTabs = $('ul.tabbednav').children('li');
$(allTabs[0]).addClass('active');
$('ul.tabbednav li a').each(function (index) {
$(this).click(function () {
// Add class "active" to clicked tab
$(this).parent().addClass('active');
// Remove class "active" from all other tabs
$('ul.tabbednav li a').not(this).parent().removeClass('active');
// Active article
var activeArticle = $(allArticles[index]);
// Hide all articles but the active one
$('div.articlesContainer article').hide();
// Show active article
$(activeArticle).show();
});
});
}
TabbedNav();.content {
max-width:500px;
font-family: Arial, sans-serif;
margin: 10px auto;
-moz-box-shadow: 1px 1px 2px 0 rgba(0,0,0,.15);
-webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,.15);
box-shadow: 1px 1px 2px 0 rgba(0,0,0,.15);
}
ul.tabbednav {
list-style-type:none;
margin:0;
padding:0;
height:31px;
border-bottom: 1px solid #ccc;
display: flex;
}
ul.tabbednav li {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
ul.tabbednav li a {
display: block;
text-align: center;
text-decoration: none;
color:#777;
font-size: 12px;
font-weight: 600;
padding: 0 8px;
height:30px;
line-height:30px;
border: 1px solid #ccc;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
}
ul.tabbednav li.active a {
color:#111;
background:#fff;
border-bottom: 1px solid #fff;
}
.articlesContainer {
position: relative;
background:#fff;
border: 1px solid #ccc;
border-top: none;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
article {
padding: 10px;
color:#222;
background: #fff;
}
.articlesContainer {
background:#fff;
border: 1px solid #ccc;
border-top: none;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
article h1 {
padding: 10px 0 0 0;
margin:0 0 5px 0;
}
article ul {
margin: 0;
}
article p,
article ul li {
font-size: 12px;
line-height: 1.5;
margin:0;
}
article p {
text-align: justify;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<ul class="tabbednav">
<li><a href="#">Description</a></li>
<li><a href="#">Delivery</a></li>
<li><a href="#">Composition</a></li>
</ul>
<div class="articlesContainer">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui. Nam scelerisque elit vitae lacus gravida, eget sodales nibh faucibus. Nulla elit sapien, molestie in mattis eget, consectetur vitae ipsum. Donec ut placerat magna, ut sodales tortor. Sed quis turpis tincidunt, fringilla felis ut, venenatis nisi. Proin egestas viverra nulla, nec dignissim nisi molestie eget.</p>
</article>
<article>
<ul>
<li>Cotton 80%</li>
<li>Cotton 10%</li>
<li>Elastan 10%</li>
</ul>
</article>
</div>
</div>
答案 2 :(得分：0)
你的意思：
$("#tabbed-buttons").on("click", "div", function() {
$('#tabbed-buttons div').removeClass('active');
$(this).addClass('active');
$('#tabbed-content div').hide();
$('#' + $(this).data('content')).show();
});
$("#tabbed-buttons > div:first").click();#tabs {
font-family: Arial, sans-serif;
max-width: 560px;
margin: 0 auto;
}
#tabbed-buttons {
overflow: hidden;
}
#tabbed-buttons > div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
float: left;
cursor: pointer;
text-align: center;
color: #3a3a3a;
font-size: 12px;
font-weight: 600;
padding: 0 8px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
bprder-bottom: none;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background: #efefef;
}
#tabbed-buttons > div.active {
background: #fff;
color: #222;
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
#tabbed-content {
clear: both;
border: 1px solid #ccc;
border-top: none;
background: #fff;
padding: 10px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#tabbed-content h3 {
margin: 0 0 5px 0;
}
#tabbed-content p {
font-size: 12px;
line-height: 1.5;
text-align: justify;
margin: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs">
<div id="tabbed-buttons">
<div data-content="tc1">Plumbing</div>
<div data-content="tc2">Heating</div>
<div data-content="tc3">Underfloor Heating</div>
<div data-content="tc4">Renewable Energy</div>
</div>
<div id="tabbed-content">
<div id="tc1">
<h3>Plumbing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis delectus quasi tempora, voluptatibus quis ex maiores minima, nesciunt itaque qui eveniet, sequi tempore, quia recusandae atque omnis soluta cum dicta.</p>
</div>
<div id="tc2">
<h3>Heating</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste sed odio laborum similique odit eos quo, excepturi quasi quos pariatur aut quidem sunt officiis blanditiis veritatis ut rem natus!</p>
</div>
<div id="tc3">
<h3>Underfloor Heating</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aspernatur veritatis dignissimos odio odit cupiditate iusto dolore sapiente laudantium quam a maiores repudiandae illum accusantium laborum temporibus ipsa, delectus eius!</p>
</div>
<div id="tc4">
<h3>Renewable Energy</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, provident cupiditate, explicabo error pariatur ipsam nam, corrupti laudantium atque impedit et quibusdam! Laborum error itaque dolores ullam ipsum dicta omnis.</p>
</div>
</div>
</div>