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;width: 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模块
22. //触发事件
23. var active = {
24. tabAdd: function(){
25. //新增一个Tab项
26. element.tabAdd('demo', {
27. title: '新选项'+ (Math.random()*1000|0) //用于演示
28. ,content: '内容'+ (Math.random()*1000|0)
29. ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
30. })
31. }
32. ,tabDelete: function(othis){
33. //删除指定Tab项
34. element.tabDelete('demo', '44'); //删除：“商品管理”
35. othis.addClass('layui-btn-disabled');
36. }
37. ,tabChange: function(){
38. //切换到指定Tab项
39. element.tabChange('demo', '22'); //切换到：用户管理
40. }
41. };
42. $('.site-demo-active').on('click', function(){
43. var othis = $(this), type = othis.data('type');
44. active[type] ? active[type].call(this, othis) : '';
45. });
47. //Hash地址的定位
48. var layid = location.hash.replace(/^#test=/, '');
49. element.tabChange('test', layid);
51. element.on('tab(test)', function(elem){
52. location.hash = 'test='+ $(this).attr('lay-id');
53. });
55. });
56. </script>