Question

我正在开发一个基于Web的应用程序，其中我在页面的左侧有两个超链接，我正在寻找的是，当我点击一个超链接时，它应该加载another.jsp的内容和将它显示在present.jsp上，如果我单击下一个超链接，它应该对present.jsp上的third.jsp执行相同的操作。

我在stackoverflow上发现了一些东西，如： -

javascript--

    function showItem(url) {
$('#right-pane').load(url);

}

链接 - ＆LT; a href =“showItem（'another.jsp）”＆gt; item 1

其中“右窗格”是div标签的id，我想要显示另一个jsp内容。

< div id="right-pane" style="position: absolute; width: 988px; height: 649px; z-index: 2; left: 193px; top: 4px">

< /div>

但是当我点击第1项时，它说 - 所请求的资源（/test1/showItem('another.jsp'））不可用。

我使用apache tomcat作为服务器。

谢谢，艾尔沙德

Answer 1

为您的链接添加课程或ID

 < a href="'another.jsp" class="link1">item 1</a>

将此添加到标题中：

$(document).ready(function() {
    $(".link1").click(function(event){
       event.preventDefault();
       var url =$(this).attr("href");
       $('#right-pane').load(url);
    });
});

尝试将此<script type="text/javascript" src="jquery.js">行更改为

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

在ie9中尝试并测试了这个：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
    $(".link1").click(function(event){
       event.preventDefault();
       var url =$(this).attr("href");

        $('#right-pane').load(url, function(data) {
        console.log(data);
    });
       console.log(url);
    });
});
        </script>
    </head>
    <body>
        <div id="layer5" class="style2" style="position: absolute; width: 79px; height: 17px; z-index: 1; left: 11px; top: 15px"><a href="test2.html" class="link1">item 1</a></div> 
        <div id="right-pane" style="position: absolute; width: 988px; height: 649px; z-index: 2; left: 193px; top: 4px"></div>
    </body>
</html>

在超链接单击时显示当前jsp页面中的另一个jsp内容

1 个答案: