zoukankan      html  css  js  c++  java
  • Tab 菜单切换

    1. <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/hshen/layui.css">
    2. <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="border: 1px solid chartreuse; 100%;">
    3. <ul class="layui-tab-title">
    4. <li class="layui-this">图文详情</li>
    5. <li>质量标准</li>
    6. </ul>
    7. <div class="layui-tab-content" style="height: 100%;border: 1px solid crimson;">
    8. <div class="layui-tab-item layui-show">
    9. <img src="lioulian.jpg" height="1600" width="100%"/>
    10. </div>
    11. <div class="layui-tab-item">
    12. <img src="lioul-converted.jpg" height="1600" width="100%"/>
    13. </div>
    14. </div>
    15. </div>
    16. <script src="https://blog-static.cnblogs.com/files/hshen/layui.js"></script>
    17. <script>
    18. layui.use('element', function(){
    19. var $ = layui.jquery
    20. ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
    21. //触发事件
    22. var active = {
    23. tabAdd: function(){
    24. //新增一个Tab项
    25. element.tabAdd('demo', {
    26. title: '新选项'+ (Math.random()*1000|0) //用于演示
    27. ,content: '内容'+ (Math.random()*1000|0)
    28. ,id: new Date().getTime() //实际使用一般是规定好的id,这里以时间戳模拟下
    29. })
    30. }
    31. ,tabDelete: function(othis){
    32. //删除指定Tab项
    33. element.tabDelete('demo', '44'); //删除:“商品管理”
    34. othis.addClass('layui-btn-disabled');
    35. }
    36. ,tabChange: function(){
    37. //切换到指定Tab项
    38. element.tabChange('demo', '22'); //切换到:用户管理
    39. }
    40. };
    41. $('.site-demo-active').on('click', function(){
    42. var othis = $(this), type = othis.data('type');
    43. active[type] ? active[type].call(this, othis) : '';
    44. });
    45. //Hash地址的定位
    46. var layid = location.hash.replace(/^#test=/, '');
    47. element.tabChange('test', layid);
    48. element.on('tab(test)', function(elem){
    49. location.hash = 'test='+ $(this).attr('lay-id');
    50. });
    51. });
    52. </script>

  • 相关阅读:
    Leetcode Binary Tree Level Order Traversal
    Leetcode Symmetric Tree
    Leetcode Same Tree
    Leetcode Unique Paths
    Leetcode Populating Next Right Pointers in Each Node
    Leetcode Maximum Depth of Binary Tree
    Leetcode Minimum Path Sum
    Leetcode Merge Two Sorted Lists
    Leetcode Climbing Stairs
    Leetcode Triangle
  • 原文地址:https://www.cnblogs.com/sz_hesheng/p/10242905.html
Copyright © 2011-2022 走看看