我有三个简单的基于 jQuery 的选项卡，我无法使其与自定义 css 设计一起使用。如果指出问题，我将不胜感激，以便我可以帮助修复它并使其在没有任何动画或效果的选项卡切换时工作。
HTML 代码：jsFiddle 链接
<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>