jQuery UI选项卡不适用于自定义设计
我有三个简单的基于jQuery的选项卡,我无法使它与定制css设计一起工作。如果你能指出这个问题,我会很感激,这样我就可以帮助解决它&让它在一个没有任何动画或效果的情况下切换标签 HTML代码:jQuery UI选项卡不适用于自定义设计,jquery,css,jquery-ui-tabs,Jquery,Css,Jquery Ui Tabs,我有三个简单的基于jQuery的选项卡,我无法使它与定制css设计一起工作。如果你能指出这个问题,我会很感激,这样我就可以帮助解决它&让它在一个没有任何动画或效果的情况下切换标签 HTML代码: //用于制表符 $(函数(){ $(“#制表符”).tabs(); }); $('.tab_headers.tab_link_wrapper:nth child(3n)').css('border-right','0px'); /*因为所有的标签都是用css隐藏的,所以我们用class.active\
//用于制表符
$(函数(){
$(“#制表符”).tabs();
});
$('.tab_headers.tab_link_wrapper:nth child(3n)').css('border-right','0px');
/*因为所有的标签都是用css隐藏的,所以我们用class.active\u标签显示标签,使用fadeIn()
功能。如果您只是想让它显示而没有效果,只需将show()而不是fadeIn()放入*/
$('.active_tab').fadeIn();
//单击选项卡链接时。。。
$('.tab_link').live('click',函数(事件){
/*…防止默认行为*/
event.preventDefault();
/*…从当前活动链接中删除选项卡链接所选类*/
$('.tab_link_selected').removeClass('tab_link_selected');
/*…并将其添加到新的活动链接*/
$(this).addClass('tab_link_selected');
/*…获取title属性(它与所需文本容器的id关联),
但是你可以使用任何你想要的属性*/
var container_id=$(this.attr('title');
//…通过更改当前活动选项卡的高度和不透明度来设置其动画…'
$('.active_选项卡')。设置动画({
高度:“切换”,不透明度:“切换”
//…当动画结束时。。。
},函数(){
//…从当前活动选项卡中删除活动选项卡类。。。
$(this.removeClass('active_选项卡');
//…并将该类添加到与单击的链接相关联的选项卡中。。。
$(容器id).addClass('active_选项卡');
//…并再次使用“切换高度”和“不透明度”来设置新活动选项卡的动画。。。
$('.active_选项卡')。设置动画({
//高度:“切换”,不透明度:“摆动”
高度:“切换”,不透明度:“切换”
});
});
.tab_标题
{
字体系列:Helvetica、Georgia、Tahoma、Arial、无衬线字体;
字体大小:13px;
字体大小:粗体;
背景色:#A78944;
最小高度:25px;
宽度:240px;
溢出:隐藏;
}
.tab\u链接\u包装器
{
右边框:1px纯白;
浮动:左;
}
.tab_链接{
浮动:左;/*重要*/
/*只是造型而已*/
背景:#A78944;
填充:5px16px 4px16px;
右边距:0px;
颜色:白色;
文字装饰:无;
}
.tab_link_selected{背景色:35; 990044;}/*选中时只是另一个选项卡链接bg颜色*/
.tab_文本{
显示:无;/*隐藏文本容器*/
/*只是造型而已*/
填充:0px;
颜色:黑色;
字体系列:Helvetica、Georgia、Tahoma、Arial、无衬线字体;
字体大小:13px;
字体大小:正常;
}
.clear{clear:两者;}
.lblCounter
{
右侧填充:5px;
颜色:#990044;
字体系列:乔治亚、赫尔维蒂卡、塔荷马、Arial、无衬线字体;
文字装饰:无;
}
.热门文章标题
{
溢出:隐藏;
颜色:#000;
线高:26px;
字体系列:乔治亚、赫尔维蒂卡、塔荷马、Arial、无衬线字体;
文本对齐:对齐;
垂直对齐:中间对齐;
浮动:左;
最小高度:26px;
宽度:228px;
左侧填充:5px;
右侧填充:5px;
边框底部:1px实心#ebebebeb;
左边框:1px实心#ebebebeb;
右边框:1px实心#ebebebeb;
文字装饰:无;
}
.热门链接
{
颜色:#000;
文字装饰:无;
}
#制表符流行标题
{
宽度:240px;
最小高度:20px;
填充:2px;
文本对齐:左对齐;
颜色:#A78944;
字体大小:14px;
字体大小:粗体;
}
.最流行的标签包装
{
浮动:左;
宽度:240px;
边缘底部:10px;
溢出:隐藏;
}
2.
3.
4.
5.
6.
7.
8.
9
10
1.
2.
3.
4.
即将到来
您的代码只需稍加润色即可工作
首先,您应该从ids#Articles
和#Writers
中删除style=“display:block;”“
。您已经完成了添加cla的内容显示
<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>