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模块
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>