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>

  • 相关阅读:
    Vpython简单例子
    我在读的书:《ACM图灵奖:19662006(第三版)计算机发展史的缩影》
    可惜啊,没见到姚期智~~
    The Sounds of Music 观后感
    终于在博客园申请开通博客了
    【引用】Python open读写文件实现脚本
    在Python中使用中文
    Discovery:深入理解计算机系统 (Ver.2) 中文版
    [导入]一个都不能少:全面认识IE插件
    [导入]午间心情
  • 原文地址:https://www.cnblogs.com/sz_hesheng/p/10242905.html
Copyright © 2011-2022 走看看