java - 在jsp中操作列表元素符号

Question

在我的网站上，我有一个 JSP 页面，用于列出示例的所有链接，如下所示。

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

在每个示例页面的底部，我使用此标记 <%@ include file="example_links.jsp"%> 来插入列表。

我的 CSS 样式是:

div.example_links ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

如果我包含这个额外的样式:

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 元素。

我更愿意只在当前显示的列表项上调用此样式，这样当用户查看列表时，他会立即知道他当前正在查看的是哪个元素。所有其他人根本没有子弹。

实现此功能的最佳方式是什么？也许有一些方法可以告诉 example_links.jsp 页面调用它的页面，以便它知道应该在哪个 li 元素上施加样式？请指教。

Answer 1

您将不得不使用 CSS 的伪选择器。只是为了给您一个指示，考虑您的 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:

ul {
list-style-type:square;
color:#FF3E96;
 }

ul li > span {
    color:Black;;
}

ul > li:hover {
    background-color:#FFDEAD;
}

.selected {
    background-color:#CFCFCF;
}

这应该会给您想要的效果。

你可以在这里看到这个-> http://jsfiddle.net/stFDH/1/

希望这有帮助!!!