0
我有簡單的三個基於jQuery的選項卡，我無法使它與定製css設計一起工作。我將不勝感激，如果指向這個問題，以便我可以幫助解決它&使它工作在一個標籤切換沒有任何動畫或效果。jQuery UI選項卡不與定製設計一起工作
HTML代碼：jsFiddle link
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
//For tabs
$(function() {
$("#tabs").tabs();
});
$('.tab_headers .tab_link_wrapper:nth-child(3n)').css('border-right', '0px');
/*Since all the tabs are hidden with css we are displaying the tab with class .active_tab using fadeIn()
function. If you just want it to show with no effect, just put show() instead of fadeIn() */
$('.active_tab').fadeIn();
//when a tab link is clicked...
$('.tab_link').live('click', function (event) {
/*...prevent the default behaviour...*/
event.preventDefault();
/* ...remove the tab_link_selected class from current active link... */
$('.tab_link_selected').removeClass('tab_link_selected');
/* ...and add it to the new active link */
$(this).addClass('tab_link_selected');
/*...get the title attribute (which corensponds to the id of the needed text container),
but you can use any attribute you want*/
var container_id = $(this).attr('title');
//...animate the current active_tab by changing it's height and opacity ...'
$('.active_tab').animate({
height: 'toggle', opacity: 'toggle'
//...and when that animation ends...
}, function() {
//...remove the active_tab class from the current active tab...
$(this).removeClass('active_tab');
//...and add that class to the tab that corensponds the clicked link...
$(container_id).addClass('active_tab');
//...and animate the new active_tab by using toggle on height and opacity again...
$('.active_tab').animate({
// height: 'toggle', opacity: 'swing'
height: 'toggle', opacity: 'toggle'
});
});
</script>
<style type="text/css">
.tab_headers
{
font-family: Helvetica, Georgia ,Tahoma, Arial, sans-serif;
font-size:13px;
font-weight:bold;
background-color:#A78944;
min-height:25px;
width:240px;
overflow:hidden;
}
.tab_link_wrapper
{
border-right:1px solid white;
float:left;
}
.tab_link {
float:left; /* important */
/* just styling */
background: #A78944;
padding:5px 16px 4px 16px;
margin-right:0px ;
color:white;
text-decoration:none;
}
.tab_link_selected{ background-color: #990044; } /* just a different tab link bg color when it's selected */
.tab_text {
display: none; /* hide the text containers */
/* just styling */
padding:0px;
color:black;
font-family: Helvetica, Georgia ,Tahoma, Arial, sans-serif;
font-size:13px;
font-weight:normal;
}
.clear {clear: both;}
.lblCounter
{
padding-right:5px;
color:#990044;
font-family: Georgia ,Helvetica,Tahoma, Arial, sans-serif;
text-decoration:none;
}
.popular-article-title
{
overflow:hidden;
color:#000;
line-height:26px;
font-family: Georgia ,Helvetica,Tahoma, Arial, sans-serif;
text-align:justify;
vertical-align:middle;
float:left;
min-height:26px;
width:228px;
padding-left:5px;
padding-right:5px;
border-bottom:1px solid #EBEBEB;
border-left:1px solid #EBEBEB;
border-right:1px solid #EBEBEB;
text-decoration:none;
}
.popular-links
{
color:#000;
text-decoration:none;
}
#tabs-popular-title
{
width:240px;
min-height:20px;
padding:2px;
text-align:left;
color:#A78944;
font-size:14px;
font-weight:bold;
}
.most-popular-tabs-wrapper
{
float:left;
width:240px;
margin-bottom:10px;
overflow:hidden;
}
</style>
</head>
</body>
<div class="most-popular-tabs-wrapper">
<div id="tabs_wrapper">
<div class="tab_headers" id="tab_headers">
<!-- the tab links -->
<div class="tab_link_wrapper"><a title="#Articles" class="tab_link tab_link_selected" >Articles</a> </div>
<div class="tab_link_wrapper"><a title="#Writers" class="tab_link">Writers</a> </div>
<div class="tab_link_wrapper" style="border-right: 0px none;"><a title="#Videos" class="tab_link">Videos</a> </div>
<!-- end tab links -->
</div>
<!-- clear it -->
<!-- start tab text containers -->
<div id="Articles" class="tab_text active_tab" style="display: block;">
<div id="popular-article-wrapper">
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_0">1</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=16&aid=17" class="popular-links" title="Belarus is open for business" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_0"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_0">Article One title</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_1">2</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=1&aid=15" class="popular-links" title="Sheikh Mohammed holds fast to his father’s legacy" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_1"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_1">Article One title two</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_2">3</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=1&aid=16" class="popular-links" title="It’s time the Lebanese removed their shackles" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_2"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_2">Article three title</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_3">4</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=17&aid=23" class="popular-links" title="Building Dubai together" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_3"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_3">Article four title </span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_4">5</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=2&aid=43" class="popular-links" title="A day for reflection and appreciation" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_4"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_4">Article five title</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_5">6</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=6&aid=18" class="popular-links" title="A Royal Visit" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_5"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_5">Article seven title</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_6">7</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=6&cid=1&aid=27" class="popular-links" title="The United Nations, just an expensive show" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_6"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_6">Article One title</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_7">8</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=6&cid=1&aid=26" class="popular-links" title="Sinister purpose behind anti-Islamic film" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_7"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_7">Article One title</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_8">9</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=18&aid=25" class="popular-links" title="Autobiography Launch" id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_8"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_8">Article One title</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularArticles_lblCounter_9">10</span>
<a style="display:inline-block;border-width:0px;" href="article.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=2&aid=36" class="popular-links" title="Seismic shift " id="MainContent_ucMostPopular_rptPopularArticles_hylnkArticle_9"><span id="MainContent_ucMostPopular_rptPopularArticles_lblArticleTitle_9">Article One title</span></a>
</div>
</div>
</div>
<div id="Writers" class="tab_text"style="display: block;">
<div id="popular-writters-wrapper">
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularWriters_lblCounter_0">1</span>
<a style="display:inline-block;border-width:0px;" href="writer.aspx?PageID=17&language=en-US&issue=5&ParID=1&CID=0&aid=-1&wid=1" class="popular-links" title="Khalaf Ahmad Al Habtoor" id="MainContent_ucMostPopular_rptPopularWriters_hylnkArticle_0"><span id="MainContent_ucMostPopular_rptPopularWriters_lblArticleTitle_0">Writer One</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularWriters_lblCounter_1">2</span>
<a style="display:inline-block;border-width:0px;" href="writer.aspx?PageID=17&language=en-US&issue=5&ParID=1&CID=0&aid=-1&wid=2" class="popular-links" title="Joanna Andrews" id="MainContent_ucMostPopular_rptPopularWriters_hylnkArticle_1"><span id="MainContent_ucMostPopular_rptPopularWriters_lblArticleTitle_1">Writer two</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularWriters_lblCounter_2">3</span>
<a style="display:inline-block;border-width:0px;" href="writer.aspx?PageID=17&language=en-US&issue=5&ParID=1&CID=0&aid=-1&wid=3" class="popular-links" title="The Media Office" id="MainContent_ucMostPopular_rptPopularWriters_hylnkArticle_2"><span id="MainContent_ucMostPopular_rptPopularWriters_lblArticleTitle_2">The Media Office</span></a>
</div>
<div class="popular-article-title">
<span class="lblCounter" id="MainContent_ucMostPopular_rptPopularWriters_lblCounter_3">4</span>
<a style="display:inline-block;border-width:0px;" href="writer.aspx?PageID=17&language=en-US&issue=5&ParID=1&CID=0&aid=-1&wid=4" class="popular-links" title="Linda S. Heard" id="MainContent_ucMostPopular_rptPopularWriters_hylnkArticle_3"><span id="MainContent_ucMostPopular_rptPopularWriters_lblArticleTitle_3">Writer four</span></a>
</div>
</div>
</div>
<div class="tab_text" id="Videos">
Comming Soon
</div>
</div>
</div>
</body>
</html>
我們很高興地發佈您的代碼，但我們真的需要這一切？也許將它縮短爲一組非常簡單的選項，選項卡和樣式，然後找到修復方法會更容易:) – Jimbo 2013-02-20 11:01:39