Heim >Web-Frontend >js-Tutorial >Bedienung von Tabs in js Das obige ist der detaillierte Inhalt vonBedienung von Tabs in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!Bedienung von Tabs in 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 }
);
}
}
In Verbindung stehende Artikel
Mehr sehen