Question

我的问题是我在我的网站上使用jquery UI标签。选项卡中的内容是动态加载的，或者你可以说每当我点击选项卡时，标签显示面板中会显示另一个html页面。

但是每当我想在标签中加载包含java代码的html页面时，我就会出现真正的问题，我正在使用语法高亮显示来设置语法。

在浏览器中调试时我通常会收到错误

无法在同一帧中加载XregExp两次

提前谢谢。

我正在使用jquery标签动态加载页面的Html页面

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="indexLayout.css" />
<link rel="stylesheet" href="navMenu.css" />
<link rel="stylesheet" href="css/jquery-ui-1.10.3.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="highlighter/shCore.js"></script>
<script src="highlighter/shBrushJava.js"></script>
<link href="highlighter/shCore.css" rel="stylesheet" type="text/css" />
<link href="highlighter/shThemeDefault.css" rel="stylesheet"
    type="text/css" />
<script>
    $(function() {
        $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });

    $("#tabs").tabs({
        load : function(event, ui) {
            $("#tabs").find("a").live('click', function() {
                $(ui.panel).load(this.href);
                return false;
                console.log(this.href);
            });
        },
        select : function(event, ui) {
            $("#tabs").find("a").die('click');
            $("#tabs").find("a").live('click', function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
    });
</script>
<style>
#tabs {
    width: 100%;
    font: 14px/1.5 Trebuchet MS, sans-serif;
}

.ui-tabs-vertical {
    width: 55em;
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12em;
    margin-top: 20px;
    background: white;
}

.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
    border-radius: 0px;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-right: .1em;
    border-right-width: 1px;
    text-decoration: underline;
    text-shadow: aqua;
}

.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: left;
    width: 74%;
    text-align: justify;
}

.ui-widget-content {
    border: 0px;
}

.ui-helper-reset {
    line-height: 1;
}

ul.tabs li.ui-state-active,ul.tabs li.ui-tabs-selected {
    color: red;
}

ul.tabs li.ui-tabs-active a,ul.tabs li.ui-tabs-selected a {
    color: red;
}
</style>
</head>
<body>
    <div id="container">
        <div id="upper-menu"></div>
        <header id="header-wrap">
            <header> </header>
        </header>
        <nav>
            <ul>
                <li><a href="index.jsp"><span>home</span></a></li>
                <li><a href="tutsPage.html"><span>about</span></a></li>
                <li><a href="tutsPage.html"><span>contact</span></a></li>
                <li><a href="tutsPage.html"><span>java</span></a></li>
                <li><a href="tutsPage.html"><span>Database</span></a></li>
                <li><a href="tutsPage.html"><span>C/C++</span></a></li>
                <li><a href="tutsPage.html"><span>Blender</span></a></li>
            </ul>
        </nav>

        <div id="content-container">
            <section>
                <div id="tabs">
                    <ul>
                        <li><h2 style="color: blue; text-align: center;">Topics
                            </h2></li>
                        <li><a href="#tabs-1">Introduction</a></li>
                        <li><a href="webpages/java/testPage1.html">Page 1</a></li>
                        <li><a href="webpages/java/testPage2.html">Page 2</a></li>
                        <li><a href="webpages/java/testPage3.html">multithreading</a></li>
                        <li><a href="webpages/java/testPage4.html">test for code</a></li>
                    </ul>
                    <div id="tabs-1">
                        <h2></h2>
                        <p></p>
                    </div>
                </div>
            </section>
            <aside>
                <div id="inside-aside-content-area">
                    <h1></h1>
                    <p></p>
                </div>
                <div id="inside-aside-content-area">
                    <h1></h1>
                    <p></p>
                </div>


            </aside>
        </div>
        <script type="text/javascript">
            SyntaxHighlighter.all()
        </script>
        <footer id="footer-wrap">
            <center>
                &copy <i>copyright reserved</i> @<b> kailash adhikari</b>
            </center>
            <hr>
            <footer> </footer>

        </footer>
    </div>
</body>
</html>

页面我正在使用带有一些Java代码的syntaxhighlighter：

<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="highlighter/shCore.js"></script>
<script type="text/javascript" src="highlighter/shBrushJava.js"></script>
<link href="highlighter/shCore.css" rel="stylesheet" type="text/css" />
<link href="highlighter/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
<pre class="brush: java">

        function foo(){
        }
    </pre>
<script type="text/javascript">
    SyntaxHighlighter.all()
</script>

</body>
</html>

Answer 1

我可以看到您在代码中使用.live()，而since version 1.7已将其替换为.On，并且您正在使用 1.9.1 ...

<script src="js/jquery-1.9.1.js"></script>

Answer 2

虽然我对SyntaxHighter没有任何经验，但似乎这篇SO帖子可能对您有所帮助：SyntaxHighlighter - Call SyntaxHighlighter.all() to highlight dynamically generated XML

解决方案是使用highlight（）而不是all（）

jQuery和语法高亮显示器不能处理动态加载的选项卡

2 个答案: