jquery ui 插件 tabs的使用! 怎么实现点击i左边导航在右边显示导航的内容

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内容轮换效果实现代码,几行搞定

本篇文章主要是对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

jQuery easyui刷新当前tabs的方法

更新特定的选项卡面板

可使用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的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

分享标题：关于jquerytabs的信息
文章出自：http://ybzwz.com/article/dscdsde.html