javascript - 如何在同一个 JSP 中点击不同的 <li> 链接显示不同的 DIV 部分？

Question

我想在单击同一 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>

Answer 1

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

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

还有一点，id 应该是唯一的(移除 img 标签内的 id="id1")，改成这样:

<div id="id1" style="display:none"> 
 <td class="fieldName" style="vertical-align:top;" > 
 <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>

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

JS 将是:

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