Javascript 如何在同一JSP中单击不同的链接时显示不同的DIV部分？

我想在同一个JSP中单击不同的链接时在JSP中显示不同的图像。 有人能帮我显示有关DIV id的图像吗

下面是我的链接

<table class="contentTable" cellspacing=1 cellpadding=0 border=0 >
        <tr class="altRow1">

            <th class="fieldName" nowrap="nowrap" align="center" colspan="<%=metricCols %>">Business statistics </th>
        </tr>

<tr>

<div class="greyBorderBox bottomSpacer10">



<ul class="noBullet" >

             <li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app1(this.id);" id="id_1">link1</a></li>
                <li class="nav-off" ><a  class="headerNav-myworkspace" href="#" onClick="show_app2(this.id);" id="id_2">link2</a></li>

</ul></td></tr>

下面是要显示的两个DIV部件

<tr class="altRow1">

<!-- if link1 is clicked this part should be displayed -->

    <%if(bus.exists())){ %>
        <div id="id1"> <td class="fieldName" style="vertical-align:top;" id="id1">
                      <a href="C:\Users\Desktop\graph.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img></a>
            </td></div>

<!-- if link2 is clicked this part should be displayed -->

<% }else {  %>

                <div id="id2"><td class="fieldName" style="vertical-align:top;">
                      <a href="C:\Users\Desktop\Capture.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\Capture.GIF" style="align:'center';" ></img></a>

                </td>
            <%
            }


</div>  </tr>

---

将用户定义的属性放入链接中，并仅将此参数作为引用发送，如下所示：

<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_1" data-target="id1">link1</a></li>
<li class="nav-off" ><a  class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_2" data-target="id2">link2</a></li>

对于初始状态，只需使用style=display:none隐藏这两个div，请参见上面的代码。同样适用于第二组

而JS将是：

 <script>
 function show_app(e){
   var target = $(e).data('target');
   $('#'+target).toggle();
   // ... another rest of code
 }
 </script>

---

在HTML中，您可以这样尝试：

在的href中添加了id1、id2，并将这些id用于

---

谢谢你的回复。test1和test2在加载时显示。您能告诉我如何在加载时默认显示test1，但test2只能在单击link2时显示。test2应该在单击link2时替换test1位置。谢谢。我试过这个，但这个对我不起作用。你能检查一下我用的是style=display:none来隐藏图片吗。。单击后图像未加载一次。是否有其他方法隐藏图像，直到单击为止。

 <script>
 function show_app(e){
   var target = $(e).data('target');
   $('#'+target).toggle();
   // ... another rest of code
 }
 </script>

 <ul class="noBullet" >
     <li class="nav-off" ><a class="headerNav-myworkspace" href="#id1">link1</a></li>
     <li class="nav-off" ><a  class="headerNav-myworkspace" href="#id2">link2</a></li>
    </ul>

  <div id="id1">test 1 </div>
 <div id="id2">test 2 </div>