layui引入 tab選項卡切換多頁面tab切換
/**
*css部分代碼
*/
<link rel="stylesheet" type="text/css" href="js/mon/UILab/layui2.4.5/css/layui.css" />
/**
*html
*/
<div class="layui-tab" lay-filter="all">
<ul class="layui-tab-title">
<li class="layui-this">網站設置</li>
<li>用戶管理</li>
<li>權限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">內容1</div>
<div class="layui-tab-item">內容2</div>
<div class="layui-tab-item">內容3</div>
<div class="layui-tab-item">內容4</div>
<div class="layui-tab-item">內容5</div>
</div>
</div>
/**
*js
*/
<script type="text/javascript" src="js/mon/UILab/layui2.4.5/layui.js"></script>
<script>
layui.use('element', function(){
var $ = layui.jquery;
var element = layui.element; //Tab的切換功能,切換事件監聽等,需要依賴element模塊
element.on('tab(prev)', function(data){});
element.on('tab(all)', function(data){
if(data.index == 0){
console.log("內容1");
} else if(data.index == 1){
console.log("內容2");
}
});
});
</script>
js用這個比較簡潔
<script>
//注意:選項卡 依賴 element 模塊,否則無法進行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至201542412@QQ.com舉報,一經查實,本站將立刻刪除。
相關推薦
-
杰奇全站偽靜態說明
登陸杰奇后臺,在小說連載參數設置中,找到“偽靜態”設置部分,本別對文章信息頁面、文章分類頁面、首字母分類頁面、排行榜頁面設置好偽靜態規則。具體如下供參考:
-
網站數據結構通常包括各種用于優化搜索引擎結果和社交媒體分享
meta 標簽在 HTML 中用來表示網頁的元數據,它不會直接顯示在頁面上,但是對于搜索引擎優化(SEO)和社交媒體平臺等非常重要。您提供的這個 meta 標簽示例用于定義網站在社交媒體平臺上共享時所顯示的站點名稱。
-
一款很簡約的藍色風格404錯誤頁面模板(站長收藏
一款很簡約的藍色風格404錯誤頁面模板(站長收藏
-
js實現圖片懶加載的方法代碼優化版
js實現圖片懶加載的方法代碼優化版.支持圖片底部高度。
-
sql導入默認用戶解決杰奇cms無法登陸管理員賬戶問題 - ytkah
前些天下載杰奇cms來體驗一下,下載的杰奇1.8版,不是默認的安裝程序,上傳文件,手工導入sql數據庫,修改了config配置文件,很快就完工了。前臺可以展現,除了有些亂碼顯...














