1.引用js和css
创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站建设、网站设计、南浔网络推广、微信小程序定制开发、南浔网络营销、南浔企业策划、南浔品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供南浔建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com
2.定义tabs：
var $tabs = $("#tabs").tabs({
tabTemplate: "lia href='#{href}'#{label}/a span class='ui-icon ui-icon-close'Remove Tab/span/li",
add:function(event, ui){
$tabs.tabs('select', ui.index);
}
});
3.定义点击时的方法：
$("a").click(function(){
$href = $(this).attr("id");
$title = $(this).text();
$tabs.tabs( "add", $href,$title);
});
希望可以帮助到你
本篇文章主要是对Jquery的Tabs内容轮换效果的实现代码进行了介绍。几行代码轻松搞定
代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
titleJquery的Tabs内容轮换效果实现代码,几行搞定/title
script
language="javascript"
type="text/javascript"
src="/Scripts/jquery-1.4.4.min.js"/script
style
type="text/css"
*
{
margin:0;
padding:0;}
body
{
font:12px
Verdana,
Geneva,
sans-serif;
color:#404040;}
.tabs
{
margin:10px
20px;
width:360px;
position:relative;
overflow:hidden;
height:1%;
height:160px;}
.tabs
span
{
z-index:2;
font-size:12px;
border:1px
solid
#d5d5d5;
width:95px;
height:25px;
line-height:25px;
text-align:center;
float:left;
margin-right:5px;
cursor:pointer;}
span.active
{
background-position:0
-25px;
background-color:#d5d5d5;}
#tab-01,
#tab-02,
#tab-03
{
position:absolute;
top:26px;
left:0;
width:338px;
padding:10px;
height:93px;
border:1px
solid
#d5d5d5;
z-index:1;}
#tab-02,
#tab-03
{
display:none;}
/style
script
type="text/javascript"
$(document).ready(function
()
{
$('.tabs
span').mouseover(function
()
{
//div隐藏
$('.tabs
div').hide();
//查找.tabs
span同辈元素span
后面紧邻的同辈元素div显示
$(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();
});
});
/script
/head
body
div
class="tabs"
!--
默认第一个tab为激活状态
--
span
class="active"热点新闻/span
div
id="tab-01"news/div
span娱乐新闻/span
div
id="tab-02"enteriment/div
span就业形势/span
div
id="tab-03"jobs/div
/div
/body
/html
更新特定的选项卡面板
可使用update方法，param参数包含2个属性:
tab:
将被更新的选项卡。
options:
选项卡相关配置项。
Example:
//当前tab
var
current_tab
=
$(‘#frame_tabs‘).tabs(‘getSelected‘);
$(‘#frame_tabs‘).tabs(‘update‘,{
tab:current_tab,
options
:
{
content
:
‘iframe
scrolling="auto"
frameborder="0"
src="‘+URL+‘"
style="width:100%;height:100%;"/iframe‘,
//或者
href
:
‘‘;
}
});
以上所述是小编给大家介绍的jQuery
easyui刷新当前tabs的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
