网站开发建设,中企动力科技集团有限公司,上海搜索推广,工程建设程序#x1f973;#x1f973;Welcome Huihuis Code World ! !#x1f973;#x1f973; 接下来看看由辉辉所写的关于LayUi的相关操作吧 目录 #x1f973;#x1f973;Welcome Huihuis Code World ! !#x1f973;#x1f973; 一.选项卡是什么 二.选项卡在什么时候使用… Welcome Huihuis Code World ! ! 接下来看看由辉辉所写的关于LayUi的相关操作吧 目录 Welcome Huihuis Code World ! ! 一.选项卡是什么 二.选项卡在什么时候使用常见使用场景  三.怎么完成点击指定菜单项显示对应的选项卡内容思路 效果展示 思路 表结构 dao jsp界面 js 其中还是有用到自定义mvc框架不懂的小伙伴可以点击下方链接查看自定义MVC框架【上篇】http://t.csdn.cn/giVlE 自定义MVC框架【中篇】--框架实现http://t.csdn.cn/pzCMx自定义MVC框架【下篇】--运用框架完成增删改查http://t.csdn.cn/RHgke 一.选项卡是什么 选项卡Tabs是一种用户界面组件用于在一个窗口或界面中显示多个相关内容或功能并允许用户在这些内容或功能之间进行切换。每个选项卡通常代表一个独立的页面或功能模块并且只有一个选项卡处于活动状态其内容将显示在界面上选项卡通常以水平或垂直的方式排列在一个导航栏或标签栏上在点击不同的选项卡时界面会切换显示对应选项卡的内容。选项卡的标签通常显示简短的标题或图标以便用户能够理解不同选项卡的含义。通过选项卡用户可以轻松地访问和浏览多个相关内容或功能并以直观的方式对界面进行组织和导航选项卡通常用于网页浏览器中的标签页应用程序中的不同视图或功能模块以及其他各种软件界面中。它们提供了一种方便的方式来组织和管理复杂的界面使用户能够快速访问所需的内容提高用户体验和界面的可用性 二.选项卡在什么时候使用常见使用场景  1. 产品详情页 一个电子商务网站的产品详情页常常使用选项卡来组织不同类型的信息例如商品描述、规格、用户评价、相关推荐等。用户可以通过点击选项卡来切换并查看不同类型的信息提供更好的信息展示和用户体验2. 应用程序设置 许多应用程序拥有复杂的设置选项为了使界面更加清晰和易于导航通常会使用选项卡来分类和组织不同的设置。例如一个音乐播放器的设置界面可以有选项卡包括音质设置、播放列表、界面主题等用户可以轻松切换选项卡以修改所需的设置3. 新闻网站 新闻类网站通常具有多个不同的新闻类别为了让用户方便地浏览不同类别的新闻可以使用选项卡来展示每个类别的新闻。用户可以通过点击选项卡快速切换到所需的新闻类别例如体育、科技、娱乐等4. 多语言支持 当一个网站或应用程序需要提供多个语言版本时可以使用选项卡来切换不同的语言。每个选项卡代表一个语言用户可以通过选择不同的选项卡来切换到所需的语言界面便于在不同语言之间进行切换和查看内容5. 多步骤操作 某些应用程序或网站可能需要用户完成多个步骤来执行特定任务例如表单填写、注册流程等。为了引导用户逐步完成操作并减少界面复杂度可以使用选项卡来显示每个步骤并引导用户在不同的选项卡之间导航 这些场景和案例说明展示了选项卡在不同应用领域的灵活应用它们可以提供更好的界面组织、内容展示和用户导航体验。选项卡的使用有助于简化界面结构提高用户交互效果并增强用户对内容的可访问性 三.怎么完成点击指定菜单项显示对应的选项卡内容思路 效果展示 因为iframe中的路径我没有填写所以点击出来的都是404后期会继续优化调整 思路 1.先从官网将对应的组件块复制过来 2.拷贝到自己的项目中再将其由静态的效果变成动态的效果数据交互 3.完成所需要的效果        将选项卡的名字变成我们自己所点击的实际的名字eg点击CSDN,那么便在选项卡的标签名中显示出CSDN        重名的选项卡不能够重复展示出多个        如果点击了一次选项卡那么在第二次点击它时不展示新的选项卡只需选中对应选项卡即可 表结构   实体类工具类配置文件等在上篇已经全部展示过在此有不懂的小伙伴可以点击下方链接查看  LayUi之树形结构的详解附有全案例代码http://t.csdn.cn/6Io5t dao dao层有些许的变化添加二级菜单中的属性如果我们还是运用上一篇的方法那么我们需要在TreeVo工具类中写无数个属性这样太过于繁杂那么我们可以将所有的属性都用一个map集合装载起来那么便可以一次拿到所有的属性 package com.wh.dao;import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;import com.wh.entity.Permission; import com.wh.entity.User; import com.zking.util.BaseDao; import com.zking.util.BuildTree; import com.zking.util.PageBean; import com.zking.util.TreeVo;public class PermissionDao extends BaseDaoPermission{//查询所有public ListPermission list( Permission permission, PageBean pageBean) throws Exception {String sqlselect * from t_oa_permission;return super.executeQuery(sql, Permission.class, pageBean);}//将原数据转换成有层级关系的数据借助自定义 工具类TreeVo完成public ListTreeVoPermission menus( Permission permission, PageBean pageBean) throws Exception {ListTreeVoPermission menus new ArrayList();ListPermission list this.list(permission, pageBean);for (Permission p : list) {TreeVoPermission tv new TreeVo();tv.setId(p.getId());tv.setParentId(p.getPid());tv.setText(p.getName());MapString , Object map new HashMap();map.put(self, p);tv.setAttributes(map);menus.add(tv);} // return menus;return BuildTree.buildList(menus, -1);//-1是顶级节点的id}}jsp界面 % page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8% !DOCTYPE html head %include file/common/head.jsp% script typetext/javascript srcstatic/js/main.js/script /head bodydiv classlayui-layout layui-layout-admindiv classlayui-headerdiv classlayui-logo layui-hide-xs layui-bg-black光军会议OA系统/div!-- 头部区域可配合layui 已有的水平导航 --ul classlayui-nav layui-layout-left!-- 移动端显示 --li classlayui-nav-item layui-show-xs-inline-block layui-hide-smlay-header-eventmenuLefticlasslayui-icon layui-icon-spread-left/i/li!-- Top导航栏 --li classlayui-nav-item layui-hide-xsa hrefnav 1/a/lili classlayui-nav-item layui-hide-xsa hrefnav 2/a/lili classlayui-nav-item layui-hide-xsa hrefnav 3/a/lili classlayui-nav-itema hrefjavascript:;navgroups/adl classlayui-nav-childdda hrefmenu 11/a/dddda hrefmenu 22/a/dddda hrefmenu 33/a/dd/dl/li/ul!-- 个人头像及账号操作 --ul classlayui-nav layui-layout-rightli classlayui-nav-item layui-hide layui-show-md-inline-blocka hrefjavascript:; imgsrc//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpgclasslayui-nav-img tester/adl classlayui-nav-childdda hrefYour Profile/a/dddda hrefSettings/a/dddda hreflogin.jspSign out/a/dd/dl/lili classlayui-nav-item lay-header-eventmenuRight lay-unselecta hrefjavascript:; iclasslayui-icon layui-icon-more-vertical/i/a/li/ul/divdiv classlayui-side layui-bg-blackdiv classlayui-side-scroll!-- 左侧导航区域可配合layui已有的垂直导航 --ul idmenu classlayui-nav layui-nav-tree lay-filtermenu/ul/div/divdiv classlayui-body!-- 内容主体区域 --div classlayui-tab lay-filterdemo lay-allowclosetrueul classlayui-tab-title!-- 选项卡 --/uldiv classlayui-tab-content!-- 选项卡内容 --/div/div/divdiv classlayui-footer!-- 底部固定区域 --底部固定区域/div/div/body /html js 为了规范我们的js代码以及El表达式等是不应该出现在jsp页面中的所以我们就可以将每个页面所对应的js代码封装起来然后在引入到页面中 var element,layer,util,$; layui.use([element, layer, util], function(){element layui.element,layer layui.layer,util layui.util,$ layui.$;//左侧树形菜单$.ajax({url:permission.action?methodNamemenus,dataType:json,method: post,success: function(data) {console.info(data)var content ;$.each(data,function(i,n){content li classlayui-nav-item layui-nav-itemed ;content a class hrefjavascript:;n.text/a ; if(n.hasChildren){var children n.children;contentdl classlayui-nav-child ;$.each(children,function(idx,nodes){content dda hrefjavascript:; onclickopenTab(\nodes.text\,\nodes.attributes.self.url\,\nodes.id\ )nodes.text/a/dd ; // content dda hrefjavascript:; onclickopenTab()nodes.text/a/dd ;})content/dl;}content /li;})$(#menu).html(content);element.render(); }}) });// //右侧选项卡function openTab(title,content,id){var $node$(li[lay-idid]);console.info($node);//新增一个Tab项if($node.length0){element.tabAdd(demo, {title : title, //用于演示content :iframe srccontent width100% height100%/iframe,id :id})}//切换到指定Tab项element.tabChange(demo, id); //切换到用户管理}//右侧选项卡 // function openTab(title,content,id){ // //新增一个Tab项 // element.tabAdd(demo, { // title: 新选项 (Math.random()*1000|0) //用于演示 // ,content: 内容 (Math.random()*1000|0) // ,id: new Date().getTime() //实际使用一般是规定好的id这里以时间戳模拟下 // }) // }好啦今天的分享就到这了希望能够帮到你呢