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"});
});
});