{"id":309,"date":"2012-11-20T17:32:00","date_gmt":"2012-11-20T09:32:00","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=309"},"modified":"2013-07-30T16:30:18","modified_gmt":"2013-07-30T08:30:18","slug":"ublue-jquery-tabs-plugin","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/ublue-jquery-tabs-plugin.html","title":{"rendered":"Ublue jQuery Tabs\u63d2\u4ef6 \u652f\u6301\u81ea\u5b9a\u4e49\u6837\u5f0f \u53ef\u591a\u6b21\u8c03\u7528"},"content":{"rendered":"

\u8fd9\u662f\u6211\u86ee\u65e9\u4ee5\u524d\u5199\u7684\u4e00\u4e2a\u63d2\u4ef6\uff0c\u81ea\u5df1\u5e73\u65f6\u7684\u4e00\u4e9b\u9879\u76ee\u4e5f\u662f\u7528\u7684\u8fd9\u4e2a\u3002\u4e00\u4e2a\u9875\u9762\u4e2d\u53ef\u4ee5\u591a\u6b21\u8c03\u7528\uff0c\u5e76\u4e14\u652f\u6301\u81ea\u5b9a\u4e49\u6837\u5f0f\u3002\u4f7f\u7528\u7684\u65b9\u6cd5\u4e5f\u5f88\u7b80\u5355\uff0c\u53ea\u8981\u7c7b\u540d\u4e00\u4e00\u5bf9\u5e94\u5c31\u884c\u3002\u4f7f\u7528\u65b9\u4fbf\uff0c\u5982\u679c\u6709\u4ec0\u4e48\u95ee\u9898\uff0c\u76f4\u63a5\u7ed9\u6211\u7559\u8a00\u5c31\u884c\u3002<\/p>\n

\u8c03\u7528\u65b9\u6cd5\uff1a<\/strong><\/p>\n

\r\n$(function(){\r\n\t$(".tabs").UblueTabs(); \/\/\u9ed8\u8ba4\u8c03\u7528\u65b9\u6cd5\r\n\r\n\t$(".custom").UblueTabs({ \/\/\u81ea\u5b9a\u4e49\u9009\u9879\u5361\u533a\u57df\r\n\ttabsTit:".customTit", \/\/\u81ea\u5b9a\u4e49\u6807\u7b7e\u533a\u57df\r\n\ttabsTab:".customTab", \/\/\u81ea\u5b9a\u4e49\u6807\u7b7e\r\n\ttabsCon:".customCon", \/\/\u81ea\u5b9a\u4e49\u5185\u5bb9\u533a\u57df\r\n\ttabsList:".customList", \/\/\u81ea\u5b9a\u4e49\u5185\u5bb9\u5217\u8868\r\n\ttabsHover:"customHover", \/\/\u81ea\u5b9a\u4e49\u9f20\u6807\u70b9\u51fb\u540e\u6837\u5f0f\r\n\teventType:"click" \/\/\u9f20\u6807\u7ecf\u8fc7\u6807\u7b7e\u5207\u6362\u5185\u5bb9 \uff08\u6b64\u5904\u4e0d\u5199\u5219\u9ed8\u8ba4\u4e3ahover\u4e8b\u4ef6 \u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u8fd9\u91cc\u7684click\u6539\u6210hover\uff09\r\n\t});\r\n});\r\n<\/pre>\n
<\/p>\n
CSS CODE:<\/strong><\/p>\n
\r\nbody,div,ul,li{ font:12px\/1.5 "Electrolize",Arial,Tahoma; margin:0px; padding:0px;}\r\nbody{ background:url(body_bg.png);}\r\nul,li{ list-style:none;}\r\n\r\n\/*default*\/\r\n.tabs{ width:400px; height:160px; margin:40px auto; border:3px solid #333;}\r\n.tabsTit,.tabsCon{ overflow:hidden;}\r\n.tabsTit { text-align:center; color:#B3AAB4;}\r\n.tabsTit li{ float:left; width:100px; height:28px; line-height:28px; cursor:pointer; background:#262626; border-bottom:2px solid #666666;}\r\n.tabsTit .tabsHover{ background:#1E1E1E; border-bottom:2px solid #A11E22;}\r\n.tabsCon { width:400px; height:130px; background:black; color:#B3AAB4;}\r\n.tabsCon li{ width:380px; height:110px; padding:10px;}\r\n\r\n\/*custom*\/\r\n.custom{ width:400px; height:160px; margin:40px auto; border:3px solid #121420;}\r\n.customTit,.customCon{ overflow:hidden;}\r\n.customTit { text-align:center; color:#B3AAB4;}\r\n.customTit li{ float:left; width:100px; height:30px; line-height:30px; cursor:pointer; background:#272C40; color:#FFF;}\r\n.customTit .customHover{ background:#607C9C;}\r\n.customCon{ width:400px; height:130px; background:#1D2130; color:#B3AAB4;}\r\n.customCon li{ width:380px; height:110px; padding:10px;}\r\n<\/pre>\n
HTML CODE:<\/strong><\/p>\n
\r\n<!--default-->\r\n<div class="tabs">\r\n\t<ul class="tabsTit">\r\n\t\t<li class="tabsTab tabsHover">Title1<\/li>\r\n\t\t<li class="tabsTab">Title2<\/li>\r\n\t\t<li class="tabsTab">Title3<\/li>\r\n\t\t<li class="tabsTab">Title4<\/li>\r\n\t<\/ul>\r\n\t<ul class="tabsCon">\r\n\t\t<li class="tabsList">Content1 \u9ed8\u8ba4\u7684\u7ed3\u6784\u548c\u6837\u5f0f<\/li>\r\n\t\t<li class="tabsList">Content2<\/li>\r\n\t\t<li class="tabsList">Content3<\/li>\r\n\t\t<li class="tabsList">Content4<\/li>\r\n\t<\/ul>\r\n<\/div>\r\n\r\n<!--custom-->\r\n<div class="custom">\r\n\t<ul class="customTit">\r\n\t\t<li class="customTab customHover">Title1<\/li>\r\n\t\t<li class="customTab">Title2<\/li>\r\n\t\t<li class="customTab">Title3<\/li>\r\n\t\t<li class="customTab">Title4<\/li>\r\n\t<\/ul>\r\n\t<ul class="customCon">\r\n\t\t<li class="customList">Content1 \u652f\u6301\u81ea\u5b9a\u4e49\u6837\u5f0f \u9f20\u6807\u70b9\u51fb\u6807\u7b7e\u5207\u6362\u9009\u9879\u5361<\/li>\r\n\t\t<li class="customList">Content2<\/li>\r\n\t\t<li class="customList">Content3<\/li>\r\n\t\t<li class="customList">Content4<\/li>\r\n\t<\/ul>\r\n<\/div>\r\n<\/pre>\n
\u66f4\u65b0\u65e5\u5fd7\uff1a
\n2013.07.26 v1.2 \u4ee3\u7801\u91cd\u6784\uff0c\u4ecd\u7136\u57fa\u4e8ejquery1.4.4\u7248\u672c\uff0c\u53c2\u6570\u548c\u914d\u7f6e\u4f9d\u65e7\u548c\u539f\u6765\u4e00\u6837\u3002<\/p>\n
Demo<\/a>Download<\/a>Github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u662f\u6211\u86ee\u65e9\u4ee5\u524d\u5199\u7684\u4e00\u4e2a\u63d2\u4ef6\uff0c\u81ea\u5df1\u5e73\u65f6\u7684\u4e00\u4e9b\u9879\u76ee\u4e5f\u662f\u7528\u7684\u8fd9\u4e2a\u3002\u4e00\u4e2a\u9875\u9762\u4e2d\u53ef\u4ee5\u591a\u6b21\u8c03\u7528\uff0c\u5e76\u4e14\u652f\u6301\u81ea\u5b9a\u4e49\u6837\u5f0f\u3002\u4f7f\u7528\u7684\u65b9\u6cd5\u4e5f\u5f88\u7b80\u5355\uff0c\u53ea\u8981\u7c7b\u540d\u4e00\u4e00\u5bf9\u5e94\u5c31\u884c\u3002\u4f7f\u7528\u65b9\u4fbf\uff0c\u5982\u679c\u6709\u4ec0\u4e48\u95ee\u9898\uff0c\u76f4\u63a5\u7ed9\u6211\u7559\u8a00\u5c31\u884c\u3002 \u8c03\u7528\u65b9\u6cd5\uff1a $(function(){ $(".tabs").UblueTabs(); \/\/\u9ed8\u8ba4\u8c03\u7528\u65b9\u6cd5 $(".custom").UblueTabs({ \/\/\u81ea\u5b9a\u4e49\u9009\u9879\u5361\u533a\u57df tabsTit:".customTit", \/\/\u81ea\u5b9a\u4e49\u6807\u7b7e\u533a\u57df tabsTab:".customTab", \/\/\u81ea\u5b9a\u4e49\u6807\u7b7e tabsCon:".customCon", \/\/\u81ea\u5b9a\u4e49\u5185\u5bb9\u533a\u57df tabsList:".customList", \/\/\u81ea\u5b9a\u4e49\u5185\u5bb9\u5217\u8868 tabsHover:"customHover", \/\/\u81ea\u5b9a\u4e49\u9f20\u6807\u70b9\u51fb\u540e\u6837\u5f0f eventType:"click" \/\/\u9f20\u6807\u7ecf\u8fc7\u6807\u7b7e\u5207\u6362\u5185\u5bb9 \uff08\u6b64\u5904\u4e0d\u5199\u5219\u9ed8\u8ba4\u4e3ahover\u4e8b\u4ef6 \u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u8fd9\u91cc\u7684click\u6539\u6210hover\uff09 }); });<\/p>\n","protected":false},"author":1,"featured_media":316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[78,71,88,29],"class_list":["post-309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-html","tag-jquery","tag-tabs","tag-original"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/309"}],"collection":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/comments?post=309"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/309\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/316"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}