如何實(shí)現(xiàn)layui選項(xiàng)卡效果-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)如何實(shí)現(xiàn)layui選項(xiàng)卡效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

具體內(nèi)容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>選項(xiàng)卡</title>
    <link rel="stylesheet" href="layui/css/layui.css">
  </head>
  <body>
<fieldset class="layui-elem-field layui-field-title" >
 <legend>默認(rèn)風(fēng)格的Tab</legend>
</fieldset>

<div class="layui-tab">
 <ul class="layui-tab-title">
  <li class="layui-this">網(wǎng)站設(shè)置</li>
  <li>用戶管理</li>
  <li>權(quán)限分配</li>
  <li>商品管理</li>
  <li>訂單管理</li>
 </ul>
 <div class="layui-tab-content">
  <div class="layui-tab-item layui-show">
   1. 高度默認(rèn)自適應(yīng)，也可以隨意固寬。
   <br>2. Tab進(jìn)行了響應(yīng)式處理，所以無需擔(dān)心數(shù)量多少。
  </div>
  <div class="layui-tab-item">內(nèi)容2</div>
  <div class="layui-tab-item">內(nèi)容3</div>
  <div class="layui-tab-item">內(nèi)容4</div>
  <div class="layui-tab-item">內(nèi)容5</div>
 </div>
</div>
<fieldset class="layui-elem-field layui-field-title" >
 <legend>動(dòng)態(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">網(wǎng)站設(shè)置</li>
  <li lay-id="22">用戶管理</li>
  <li lay-id="33">權(quán)限分配</li>
  <li lay-id="44">商品管理</li>
  <li lay-id="55">訂單管理</li>
 </ul>
 <div class="layui-tab-content">
  <div class="layui-tab-item layui-show">內(nèi)容1</div>
  <div class="layui-tab-item">內(nèi)容2</div>
  <div class="layui-tab-item">內(nèi)容3</div>
  <div class="layui-tab-item">內(nèi)容4</div>
  <div class="layui-tab-item">內(nèi)容5</div>
 </div>
</div>
<div class="site-demo-button" >
 <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項(xiàng)</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">網(wǎng)站設(shè)置</li>
  <li lay-id="22">用戶管理</li>
  <li lay-id="33">權(quán)限分配</li>
  <li lay-id="44">商品管理</li>
  <li lay-id="55">訂單管理</li>
 </ul>
 <div class="layui-tab-content">
  <div class="layui-tab-item layui-show">
   點(diǎn)擊該Tab的任一標(biāo)題，觀察地址欄變化，再刷新頁面。選項(xiàng)卡將會(huì)自動(dòng)定位到上一次切換的項(xiàng)
  </div>
  <div class="layui-tab-item">內(nèi)容2</div>
  <div class="layui-tab-item">內(nèi)容3</div>
  <div class="layui-tab-item">內(nèi)容4</div>
  <div class="layui-tab-item">內(nèi)容5</div>
 </div>
</div>

<fieldset class="layui-elem-field layui-field-title" >
 <legend>簡潔風(fēng)格的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
 <ul class="layui-tab-title">
  <li class="layui-this">網(wǎng)站設(shè)置</li>
  <li>用戶管理</li>
  <li>權(quán)限分配</li>
  <li>商品管理</li>
  <li>訂單管理</li>
 </ul>
 <div class="layui-tab-content" >
  <div class="layui-tab-item layui-show">內(nèi)容不一樣是要有，因?yàn)槟憧梢员O(jiān)聽tab事件（閱讀下文檔就是了）</div>
  <div class="layui-tab-item">內(nèi)容2</div>
  <div class="layui-tab-item">內(nèi)容3</div>
  <div class="layui-tab-item">內(nèi)容4</div>
  <div class="layui-tab-item">內(nèi)容5</div>
 </div>
</div>

<fieldset class="layui-elem-field layui-field-title" >
 <legend>卡片風(fēng)格的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-card">
 <ul class="layui-tab-title">
  <li class="layui-this">網(wǎng)站設(shè)置</li>
  <li>用戶管理</li>
  <li>權(quán)限分配</li>
  <li>商品管理</li>
  <li>訂單管理</li>
 </ul>
 <div class="layui-tab-content" >
  <div class="layui-tab-item layui-show">默認(rèn)寬度是相對(duì)于父元素100%適應(yīng)的，你也可以固定寬度。</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>當(dāng)Tab數(shù)超過一定寬度</legend>
</fieldset>

<div class="layui-tab layui-tab-card" >
 <ul class="layui-tab-title">
  <li class="layui-this">網(wǎng)站設(shè)置</li>
  <li>用戶管理</li>
  <li>權(quán)限分配</li>
  <li>商品管理</li>
  <li>訂單管理</li>
 </ul>
 <div class="layui-tab-content" >
  <div class="layui-tab-item layui-show">
   1. 寬度足夠，就不會(huì)出現(xiàn)右上圖標(biāo)；寬度不夠，就會(huì)開啟展開功能。
   <br>2. 如果你的寬度是自適應(yīng)的，Tab會(huì)自動(dòng)判斷是否需要展開，并適用于所有風(fēng)格。
  </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">網(wǎng)站設(shè)置</li>
  <li>用戶基本管理</li>
  <li>權(quán)限分配</li>
  <li>商品管理</li>
  <li>訂單管理</li>
 </ul>
 <div class="layui-tab-content" >
  <div class="layui-tab-item layui-show">
   1. 我個(gè)人比較喜歡卡片風(fēng)格的，所以你發(fā)現(xiàn)又是以卡片的風(fēng)格舉例
   2. 刪除功能適用于所有風(fēng)格
  </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(){
   //新增一個(gè)Tab項(xiàng)
   element.tabAdd('demo', {
    title: '新選項(xiàng)'+ (Math.random()*1000|0) //用于演示
    ,content: '內(nèi)容'+ (Math.random()*1000|0)
    ,id: new Date().getTime() //實(shí)際使用一般是規(guī)定好的id，這里以時(shí)間戳模擬下
   })
  }
  ,tabDelete: function(othis){
   //刪除指定Tab項(xiàng)
   element.tabDelete('demo', '44'); //刪除：“商品管理”


   othis.addClass('layui-btn-disabled');
  }
  ,tabChange: function(){
   //切換到指定Tab項(xiàng)
   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>

效果圖：

如何實(shí)現(xiàn)layui選項(xiàng)卡效果

關(guān)于“如何實(shí)現(xiàn)layui選項(xiàng)卡效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

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

標(biāo)題名稱：如何實(shí)現(xiàn)layui選項(xiàng)卡效果-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article32/csjppc.html

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

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

猜你還喜歡下面的內(nèi)容