2012-03-15 1 views
0

Я разрабатываю веб-приложение, в котором у меня есть две гиперссылки в левой части страницы, и то, что я ищу, - это когда я нажимаю на одна гиперссылка должна загружать содержимое another.jsp и отображать его поверх present.jsp, и если я нажму следующую гиперссылку, он должен сделать то же самое для third.jsp по сравнению с present.jsp.Показывать другой контент jsp на текущей странице jsp при нажатии гиперссылки

я нашел что-то на StackOverflow, как: -

javascript--

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

}

< link-- A HREF = "showItem ('another.jsp)"> пункт 1

где «правая панель» - это идентификатор тега div, где я хочу, чтобы отображался другой контент jsp.

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

< /div> 

Но когда я нажав на пункте 1 его saying-- запрошенного ресурса (/test1/showItem('another.jsp ')) не доступен.

Я использую apache tomcat в качестве сервера.

Спасибо, Аршад

+0

у вас включен jquery.js, если не проверить http://docs.jquery.com/How_jQuery_Works – Kimtho6

+0

Привет Ким, Да я бы добавил, как: - 0 в голову область. – Ars

+0

Тогда см. Мой ответ;) – Kimtho6

ответ

3

добавить класс или идентификатор т Ваша ссылка

< 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> 
+0

привет Ким, спасибо за код, но всякий раз, когда я нажимаю на гиперссылку, не открывая ее в разделе div моей текущей страницы, ее открывается сама страница «another.jsp». – Ars

+0

@Ars см. Мое обновление – Kimtho6

+0

снова тот же выход, должен ли я опубликовать весь код? – Ars