这种嵌套添加子页面标题和内容的操作常见,在刚开始规划页面的时候这里要注意什么,怎么完成这里的代码功能都要提前大概想好,这里要注意的几个点是如何实现点击从而添加子页面;子页面标题如何显示添加;如何阻止重复添加子页面和标题……
var str; //声明一个变量接收标题
$(document).ready(function () {
//1.0 销售订单历史页面跳转
$("#salesOrder").click(function () {
//判断页面是否存在
if (str != "销售订单历史")
{
$("#navTitle li.layui-this").removeClass("layui-this");
//移除layui选项卡的高亮类
$("#navContent>div.layui-show").removeClass("layui-show");
//移除layui选项卡的高亮类
$("#navTitle").append("<li class='layui-this'><span>销售订单历史</span></li>");
//直接添加字符串,把刚才移除的高亮类添加到这里
$("#navContent").append("<div class='layui-tab-item layui-show'>" +
<!-- ============content 显示需要加载的页面 嵌套导航页面===========-->" +
"<iframe src='/Cargo/Market/SalesOrder' id='content' style='display:block;width:100%;border:none;height:900px;'></iframe>" +
"<!-- ================content 显示需要加载的页面============-->" +
"</div>");
//用iframe嵌套显示子页面,iframe直接指定子页面的路径
}
str = $("#navTitle li span").html();
//第一次添加之后获取到标题的内容,第二次如果是重复添加的就进入不了if判断了,也就不重复添加了。
});