layui修改某一行的默认样式_layui的tab切换默认选中

在使用Layui框架开发网页时，我们经常会遇到需要修改表格某一行的默认样式以及设置Tab标签页默认选中的需求。本文将详细介绍如何实现这两个功能，并提供多种解决方案。

修改某一行的默认样式

解决方案一：使用CSS选择器

Layui表格组件提供了丰富的API和事件，可以通过这些API和事件来动态修改表格行的样式。以下是一个示例，展示如何通过CSS选择器来修改某一行的默认样式。

html
</p>



  
  <title>Layui 表格样式修改</title>
  
  
    .highlight {
      background-color: #ffcccc;
    }
  


  <table id="demo"></table>

  
  
    layui.use(['table'], function(){
      var table = layui.table;

      // 渲染表格
      table.render({
        elem: '#demo'
        ,url: '/data.json' // 数据接口
        ,cols: [[ // 表头
          {field: 'id', title: 'ID', width: 80}
          ,{field: 'username', title: '用户名', width: 120}
          ,{field: 'email', title: '邮箱', width: 150}
        ]]
        ,page: true // 开启分页
      });

      // 监听行点击事件
      table.on('row(test)', function(obj){
        // 将当前行添加高亮类
        obj.tr.addClass('highlight').siblings().removeClass('highlight');
      });
    });
  



<p>

解决方案二：使用Layui的`done`回调

Layui表格组件的done回调函数可以在数据渲染完成后执行，我们可以在该回调中动态修改某一行的样式。

html
</p>



  
  <title>Layui 表格样式修改</title>
  
  
    .highlight {
      background-color: #ffcccc;
    }
  


  <table id="demo"></table>

  
  
    layui.use(['table'], function(){
      var table = layui.table;

      // 渲染表格
      table.render({
        elem: '#demo'
        ,url: '/data.json' // 数据接口
        ,cols: [[ // 表头
          {field: 'id', title: 'ID', width: 80}
          ,{field: 'username', title: '用户名', width: 120}
          ,{field: 'email', title: '邮箱', width: 150}
        ]]
        ,page: true // 开启分页
        ,done: function(res, curr, count){
          // 假设我们要高亮行
          $('tr[data-index="0"]').addClass('highlight');
        }
      });
    });
  



<p>

设置Tab标签页默认选中

解决方案一：使用`elem`属性

Layui的Tab组件提供了elem属性，可以通过设置lay-id来指定默认选中的标签页。

html
</p>



  
  <title>Layui Tab 默认选中</title>
  


  <div class="layui-tab">
    <ul class="layui-tab-title">
      <li class="layui-this">标签一</li>
      <li>标签二</li>
      <li>标签三</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容一</div>
      <div class="layui-tab-item">内容二</div>
      <div class="layui-tab-item">内容三</div>
    </div>
  </div>

  
  
    layui.use('element', function(){
      var element = layui.element;
    });
  



<p>

解决方案二：使用JavaScript动态设置

如果需要在页面加载后动态设置默认选中的标签页，可以使用JavaScript来实现。

html
</p>



  
  <title>Layui Tab 默认选中</title>
  


  <div class="layui-tab">
    <ul class="layui-tab-title">
      <li>标签一</li>
      <li>标签二</li>
      <li>标签三</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item">内容一</div>
      <div class="layui-tab-item">内容二</div>
      <div class="layui-tab-item">内容三</div>
    </div>
  </div>

  
  
    layui.use(['element', 'jquery'], function(){
      var element = layui.element;
      var $ = layui.jquery;

      // 动态设置默认选中的标签页
      element.tabChange('demo', '2'); // 切换到标签二
    });
  



<p>