如何實現layui選項卡效果-創(chuàng)新互聯

這篇文章將為大家詳細講解有關如何實現layui選項卡效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯建站堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站制作、成都網站設計、外貿營銷網站建設、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的英山網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

具體內容如下

<!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>動態(tài)操作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">內容不一樣是要有，因為你可以監(jiān)聽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. 我個人比較喜歡卡片風格的，所以你發(fā)現又是以卡片的風格舉例
   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的切換功能，切換事件監(jiān)聽等，需要依賴element模塊

 //觸發(fā)事件
 var active = {
  tabAdd: function(){
   //新增一個Tab項
   element.tabAdd('demo', {
    title: '新選項'+ (Math.random()*1000|0) //用于演示
    ,content: '內容'+ (Math.random()*1000|0)
    ,id: new Date().getTime() //實際使用一般是規(guī)定好的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選項卡效果

關于“如何實現layui選項卡效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯建站www.rwnh.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：如何實現layui選項卡效果-創(chuàng)新互聯
URL鏈接：http://www.rwnh.cn/article32/csjppc.html

成都網站建設公司_創(chuàng)新互聯，為您提供小程序開發(fā)、企業(yè)網站制作、外貿建站、Google、App開發(fā)、移動網站建設

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

如何實現layui選項卡效果-創(chuàng)新互聯