限制页面重复添加

这种嵌套添加子页面标题和内容的操作常见，在刚开始规划页面的时候这里要注意什么，怎么完成这里的代码功能都要提前大概想好，这里要注意的几个点是如何实现点击从而添加子页面；子页面标题如何显示添加；如何阻止重复添加子页面和标题……

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判断了，也就不重复添加了。
});