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 param作为参考，如下所示：

<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，请参阅上面的代码。同样适用于第二个div。

JS 将是：

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

Answer 2

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

在#id1, #id2的href中添加了<a>，并将id's用于<div>

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

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

2 个答案: