溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何實現layui選項卡效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" >
<legend>默認風格的Tab</legend>
</fieldset>
<div class="layui-tab">
<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. 高度默認自適應，也可以隨意固寬。
<br>2. Tab進行了響應式處理，所以無需擔心數量多少。
</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>
<fieldset class="layui-elem-field layui-field-title" >
<legend>動態操作Tab</legend>
</fieldset>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">網站設置</li>
<li lay-id="22">用戶管理</li>
<li lay-id="33">權限分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">訂單管理</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>
<div class="site-demo-button" >
<button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項</button>
<button class="layui-btn site-demo-active" data-type="tabDelete">刪除：商品管理</button>
<button class="layui-btn site-demo-active" data-type="tabChange">切換到：用戶管理</button>
</div>
<!-- 通用-970*90 -->
<div>
<ins class="adsbygoogle" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
</div>
<fieldset class="layui-elem-field layui-field-title" >
<legend>Hash地址定位</legend>
</fieldset>
<div class="layui-tab" lay-filter="test">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">網站設置</li>
<li lay-id="22">用戶管理</li>
<li lay-id="33">權限分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
點擊該Tab的任一標題，觀察地址欄變化，再刷新頁面。選項卡將會自動定位到上一次切換的項
</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>
<fieldset class="layui-elem-field layui-field-title" >
<legend>簡潔風格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<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">內容不一樣是要有，因為你可以監聽tab事件（閱讀下文檔就是了）</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>
<fieldset class="layui-elem-field layui-field-title" >
<legend>卡片風格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card">
<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">默認寬度是相對于父元素100%適應的，你也可以固定寬度。</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 class="layui-tab-item">6</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" >
<legend>當Tab數超過一定寬度</legend>
</fieldset>
<div class="layui-tab layui-tab-card" >
<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. 寬度足夠，就不會出現右上圖標；寬度不夠，就會開啟展開功能。
<br>2. 如果你的寬度是自適應的，Tab會自動判斷是否需要展開，并適用于所有風格。
</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 class="layui-tab-item">6</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" >
<legend>帶刪除功能的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card" lay-allowclose="true">
<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. 我個人比較喜歡卡片風格的，所以你發現又是以卡片的風格舉例
2. 刪除功能適用于所有風格
</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 class="layui-tab-item">6</div>
</div>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element(); //Tab的切換功能，切換事件監聽等，需要依賴element模塊
//觸發事件
var active = {
tabAdd: function(){
//新增一個Tab項
element.tabAdd('demo', {
title: '新選項'+ (Math.random()*1000|0) //用于演示
,content: '內容'+ (Math.random()*1000|0)
,id: new Date().getTime() //實際使用一般是規定好的id，這里以時間戳模擬下
})
}
,tabDelete: function(othis){
//刪除指定Tab項
element.tabDelete('demo', '44'); //刪除：“商品管理”
othis.addClass('layui-btn-disabled');
}
,tabChange: function(){
//切換到指定Tab項
element.tabChange('demo', '22'); //切換到：用戶管理
}
};
$('.site-demo-active').on('click', function(){
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
//Hash地址的定位
var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid);
element.on('tab(test)', function(elem){
location.hash = 'test='+ $(this).attr('lay-id');
});
});
</script>
</body>
</html>效果圖：
關于“如何實現layui選項卡效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
