thinkcmf+layui 改為滑動響應，單擊跳轉

星空守望者--jkmiao發表於2024-06-25
UI

　　最近網站開發，想將layui tab 單擊響應改為滑動響應，搜尋很多，終於解決問題，在此記錄下。

　　首先給需要懸浮觸發的layui-tab元件加上layui-tab--hover 類

<div class="layui-tab layui-tab--hover" lay-filter="demo" style="margin-top: 20px;">
  <ul class="layui-tab-title">
    <li class="layui-this"> 網站設定</li>
    <li><a href="xxx.html"> 使用者管理</a></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>

然後將下面的程式碼放置頁面中執行

$(function () {
  $('.layui-tab--hover .layui-tab-title li').mouseenter(function () {
    $(this).addClass('layui-this').siblings().removeClass('layui-this')
    const tabRoot = $(this).closest('.layui-tab--hover')
    const tabContent = tabRoot.find('.layui-tab-content')
    const index = $(this).index()
    tabContent.find('.layui-tab-item').eq(index).addClass('layui-show').siblings().removeClass('layui-show')
  })
})

相關文章