0
这
道歉之前已经被覆盖，但我无法找到任何具体的...JQuery的标签式内容
我是新的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"});
});
});