伪列表元素点击后高亮显示方法

最新推荐文章于 2023-12-28 16:54:57 发布

原创最新推荐文章于 2023-12-28 16:54:57 发布 · 881 阅读

0 ·

CC 4.0 BY-SA版权

jsp 同时被 2 个专栏收录

71 篇文章

订阅专栏

35 篇文章

订阅专栏

本文介绍如何在JSP中使用JavaScript实现一种特殊的“伪列表”效果，通过改变背景来增强用户交互体验。该方法利用了<td>元素，并通过循环设置不同的ID值来实现动态聚焦效果。

本文所谓的“伪列表”是指将非标准的列表元素按水平或垂直顺序排列在一起，看上去貌似列表。以<td></td>为例

jsp中插入以下js：

       <script lang="javascript">
            var lastItem = -1;

            function focusedItem(itemid)
            {               
                if(lastItem != -1 && lastItem != itemid)
                {
                    document.getElementById(lastItem).style.backgroundImage="url(../../images/men.gif)";
                }
                
                document.getElementById(itemid).style.background="#40E0D0";
//                document.getElementById(itemid).style.backgroundImage="url(../../images/button.jpg)";
                lastItem = itemid;

            }
        </script>

调用处：

                <td class="TDS" >
                    <a href="../../test.do?project=<%=p.getProjectid()%>" target="content" onclick="focusedItem(<%=i%>)" id="<%=i%>" /><%=pName%>

                </td>

i值为循环语句的自增元素。