Maison >interface Web >js tutoriel >Fonctionnement des onglets dans js Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!Fonctionnement des onglets dans js
<!--tabs 选项卡--><h1>tabs 选项卡</h1><!--tabs 选项卡:动态添加选项卡--><p style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTabB('google','http://www.google.com')">google</a> <a href="#" class="easyui-linkbutton" onclick="addTabB('jquery','http://jquery.com/')">jquery</a> <a href="#" class="easyui-linkbutton" onclick="addTabB('easyui','http://jeasyui.com/')">easyui</a></p>
<!--tabs 选项卡定义-->
<p id='tabsId' class="easyui-tabs" style="width:500px;
height:250px;
"> <p title="Tab1" style="padding:20px;
display:none;
"> tab1 </p> <p title="Tab2" data-options="closable:true" style="overflow:auto;
padding:20px;
display:none;
"> tab2 </p> <p title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;
display:none;
"> tab3 </p> </p>
//动态添加选项卡方法function addTab(title, url) {
if ($('#tt').tabs('exists', title)) {
$('#tt').tabs('select', title);
}
else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;
height:100%;
"></iframe>';
$('#tt').tabs('add', {
title:title, content:content, closable:true }
);
}
}
Articles Liés
Voir plus