Java 在jsp中操作列表项目符号
在我的网站上,我有一个单独的JSP页面,用于列出指向示例的所有链接,如下所示 示例_links.jsp:Java 在jsp中操作列表项目符号,java,html,css,jsp,Java,Html,Css,Jsp,在我的网站上,我有一个单独的JSP页面,用于列出指向示例的所有链接,如下所示 示例_links.jsp: <div class="example_links" style="float:left; width:48%"> Basic: <ul> <li><a href="basicssp.jsp">Basic initialisation</a> - Server Side Processing</li>
<div class="example_links" style="float:left; width:48%">
Basic:
<ul>
<li><a href="basicssp.jsp">Basic initialisation</a> - Server Side Processing</li>
<li><a href="basiccrud.jsp">Basic initialisation</a> - basic CRUD example</li>
<li><a href="validation.jsp">Field Validation</a> - includes Theme for DataTables</li>
<li><a href="multi_filter.jsp">Multiple Filter Searches</a> - perform search on specific columns</li>
<li><a href="customdates.jsp">Custom Date Fields</a></li>
<li><a href="exporttoexcel.jsp">Export To Excel</a></li>
</ul>
<br>General Purpose Database Access - Examples without DataTables:
<ul>
<li><a href="basicconnection.jsp">Basic Connection</a> - demonstrates how to perform a basic database connection.</li>
<li><a href="fielddata.jsp">Populating Text Fields From JSON String</a> - demonstrates a Profiles page for the user allowing them to update their personal data.</li>
<li><a href="selectdata.jsp">Populating A Select Listbox</a></li>
<li><a href="exporttoexcel2.jsp">Export To Excel Without DataTables</a></li>
</ul>
</div>
<div class="example_links" style="float:right; width:48%">
Advanced:
<ul>
<li><a href="join1.jsp">Joined Tables 1</a> - joining multiple tables - working with objects</li>
<li><a href="join2.jsp">Joined Tables 2</a> - working with lookup tables and arrays of objects</li>
<li><a href="self.jsp">Self referencing join tables</a></li>
<li><a href="functions.jsp">Using Database Functions And Old Style Joins</a></li>
<li><a href="functions2.jsp">Using Database Functions On Where Conditions</a></li>
</ul
</div>
如果我包括此附加样式:
div.example_links ul li {
background-image: url(/jed/media/images/purple_square.png);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
它通过预先设置项目符号图像来影响所有li元素
我更喜欢的是,仅在当前显示的列表项上调用此样式,以便当用户查看列表时,他立即知道当前正在查看的项目。所有其他人都没有子弹
实现此功能的最佳方式是什么?也许有某种方法可以告诉示例_links.jsp页面调用它的是哪个页面,以便它知道应该对哪个li元素应用样式?请告知。您必须使用CSS的psuedo选择器。为了给你一个指针,考虑一下你的HTML:
<ul>
<li class="selected"><a href="#">Basic initialisation</a> <span>- Server Side Processing</span></li>
<li><a href="#">Basic initialisation</a><span> - basic CRUD example</span></li>
<li><a href="#">Field Validation</a><span> - includes Theme for DataTables</span></li>
<li><a href="#">Multiple Filter Searches</a><span> - perform search on specific columns</span></li>
<li><a href="#">Custom Date Fields</a>
</li>
<li><a href="#">Export To Excel</a>
</li>
</ul>
这会给你你想要的效果
你可以在这里看到->
希望这有帮助 在这种情况下,您不能使用css
a:active选择器吗?我不熟悉a:active。这是怎么回事?你能给我举个例子吗?不用麻烦了。它认为它可以用于当前活动的链接,但它错了。很抱歉。您可能会发现这个答案很有用。很难回答:嗯……这有点帮助,但是您的示例中未选中的列表项旁边仍然有一个项目符号。好的。。我一直在玩这个,并设法用一个项目符号隔离给定的列表项。现在我们已经解决了css部分,下一个问题是纯java问题,在示例_links.jsp页面中,我如何确定哪个列表项需要class=“selected”属性?
<ul>
<li class="selected"><a href="#">Basic initialisation</a> <span>- Server Side Processing</span></li>
<li><a href="#">Basic initialisation</a><span> - basic CRUD example</span></li>
<li><a href="#">Field Validation</a><span> - includes Theme for DataTables</span></li>
<li><a href="#">Multiple Filter Searches</a><span> - perform search on specific columns</span></li>
<li><a href="#">Custom Date Fields</a>
</li>
<li><a href="#">Export To Excel</a>
</li>
</ul>
ul {
list-style-type:square;
color:#FF3E96;
}
ul li > span {
color:Black;;
}
ul > li:hover {
background-color:#FFDEAD;
}
.selected {
background-color:#CFCFCF;
}