Javascript 从菜单中动态创建jQuery选项卡_Javascript_Jquery_Jquery Ui_Jsp

Javascript 从菜单中动态创建jQuery选项卡

javascript jquery jquery-ui jsp

Javascript 从菜单中动态创建jQuery选项卡,javascript,jquery,jquery-ui,jsp,Javascript,Jquery,Jquery Ui,Jsp,对JSP和jQuery来说有点陌生，所以这个问题可能看起来有点基本-但是我搜索了一下，没有找到一个好的解决方案。我试图让一个JSP页面从菜单中动态加载选项卡——在web上有很多示例，但它们只需按下一个按钮即可加载选项卡。到目前为止，我得到的是： Welcome.jsp <%@page import="java.util.Iterator"%> <%@page language="java" contentType="text/html; charset=ISO-8859-1"

对JSP和jQuery来说有点陌生，所以这个问题可能看起来有点基本-但是我搜索了一下，没有找到一个好的解决方案。
我试图让一个JSP页面从菜单中动态加载选项卡——在web上有很多示例，但它们只需按下一个按钮即可加载选项卡。到目前为止，我得到的是：

Welcome.jsp

<%@page import="java.util.Iterator"%>
<%@page language="java" contentType="text/html; charset=ISO-8859-1"%>
<%@page import="main.mp2.util.UtilConstants, java.util.LinkedList" %>
<% String jsp = (String) request.getAttribute(UtilConstants.JSP_FILE);

%>
<!DOCTYPE html>
<html>
    <head>
        <title>Main Page</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
        <script type="text/javascript" src='js/jquery-1.10.2.js'></script>
        <script type="text/javascript" src='js/jquery.lightbox_me.js'></script>
        <script type="text/javascript" src='js/jquery-ui.js'></script>
        <script type="text/javascript" src='js/TreeMenu.js'></script>
        <script type="text/javascript" src='js/javascript.js'></script>
    </head>

    <body>
        <div id="body_page">
            <div class="content">
                <div class="content_menu">
                    <ul id="menu">
                        <li class="title">Main menu</li>
                        <li><a href="#!/Welcome" id="add_welcome_tab">Main</a></li>
                        <li><a href="#!/Applications" id="add_applications_tab">Applications</a>
                    </ul>
                    <script type="text/javascript">make_tree_menu('menu');</script>
                </div>
                <div id="content_area">
                    <div id="tabs">
                        <ul>
                            <li>
                                <a href="#tabs-1"><%=jsp.substring(jsp.lastIndexOf("/") + 1, jsp.lastIndexOf("."))%></a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
                            </li>
                        </ul>
                        <div id="tabs-1">
                            <jsp:include page="Welcome.jsp" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


主页

主菜单



制作树菜单（“菜单”）；


移除标签

javascrips.js

$(function() {
    var tabTemplate = "<li><a href='\#{href}'>\#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;
    var tabs = $("#tabs").tabs();

    // functions to create tabs for each menu type
    //menu-item Welcome
    $(document).on('click', '#add_welcome_tab', function() {
        var label = "Welcome",
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        tabContentHtml = "Welcome";
        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
        tabs.tabs("refresh");
        tabCounter++;
    });

    //menu-item Applications
    $(document).on('click', '#add_applications_tab', function() {
        var label = "Applications",
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        tabContentHtml = "Applications";
        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
        tabs.tabs("refresh");
        tabCounter++;
    });

    // close icon: removing the tab on click
    tabs.delegate("span.ui-icon-close", "click", function() {
        var panelId = $(this).closest("li").remove().attr("aria-controls");
        $("#" + panelId).remove();
        tabs.tabs("refresh");
    });

    tabs.bind("keyup", function(event) {
        if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
            var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
        }
    });
});

$（函数（）{
var tabTemplate=“删除选项卡””，
tabCounter=2；
var tabs=$（“#tabs”）.tabs（）；
//用于为每种菜单类型创建选项卡的函数
//菜单项欢迎光临
$（文档）。在（'单击'，'添加欢迎选项卡'，函数（）上{
var label=“欢迎”，
id=“tabs-”+tabCounter，
li=$（tabTemplate.replace（/#\{href\}/g，“#”+id）。replace（/#\{label\}/g，label）），
tabContentHtml=“欢迎”；
tabs.find（“.ui tabs nav”）.append（li）；
tabs.append（“”+tabContentHtml+””）；
制表符。制表符（“刷新”）；
tabCounter++；
});
//菜单项应用程序
$（文档）。在（'单击'，'添加应用程序选项卡'，函数（）上{
var label=“应用程序”，
id=“tabs-”+tabCounter，
li=$（tabTemplate.replace（/#\{href\}/g，“#”+id）。replace（/#\{label\}/g，label）），
tabContentHtml=“应用程序”；
tabs.find（“.ui tabs nav”）.append（li）；
tabs.append（“”+tabContentHtml+””）；
制表符。制表符（“刷新”）；
tabCounter++；
});
//关闭图标：单击删除选项卡
tabs.delegate（“span.ui图标关闭”，“单击”，函数（）{
var panelId=$（this.closest（“li”）.remove（）.attr（“aria控件”）；
$（“#”+panelId）.remove（）；
制表符。制表符（“刷新”）；
});
tabs.bind（“键控”），函数（事件）{
if（event.altKey&&event.keyCode===$.ui.keyCode.BACKSPACE）{
var panelId=tabs.find（“.ui-tabs-active”）.remove（）.attr（“aria-controls”）；
$（“#”+panelId）.remove（）；
制表符。制表符（“刷新”）；
}
});
});

jQuery选项卡的代码取自，它在非JSP页面上工作，但在我的页面上，它只在同一个选项卡上加载所有内容。我可以猜测问题可能出在我把

放在哪里，但我不知道应该把它放在哪里。有什么想法吗

附：第一个问题：）

EDIT1:我设法让选项卡出现，但现在我想在所有选项卡中加载每个JSP文件的内容，而不仅仅是第一个。。。想法？

哇，我知道这是第一个问题！请只张贴相关代码。阅读这一页：谢谢，试着清理一下，留下最相关的部分，尽管我不确定这是否足够。。。