Question

我有一个导航栏，其元素使用Struts2 iterator标记呈现，如下所示：

<ul>
    <li><a href="#">Home</a></li>

<s:iterator var="row" value="#session.PrivMenu.children" status="stat">         
    <li>
        <a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
            <s:property value="#row.moduleName"/>
        </a>
    </li>
</s:iterator>  

</ul>

现在，我必须对每个<a>元素应用图标。由于每个导航栏元素的图标不同，因此每个<a>标记都需要不同的样式。

我如何在struts2中实现这一点??

我想到了动态cssClass属性。

cssClass = '<s:property value="#row.moduleName"/>' + icon

但我想如果稍后如果模块名称发生变化，我将不得不编辑我的CSS。我错了吗？还有更好的主意吗？

Answer 1

如果您想与nth-child合作，则不适用于ie8或更低版本的浏览器。另一种可能性（如果菜单结构没有改变）是使用一个带有计数器的唯一类。

然后使用正确的css设计菜单

如果你有可能使用计数器，你可以使用如下：

<ul>
  <li class="menu-1"><a href="#">Home</a></li>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-2"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-3"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>    
</ul>

Answer 2

您可以只为其添加一个类，然后使用css添加图标。在你的CSS中，你可以使用'nth-child'选择器为每个标签添加不同的图标。

有关详细信息，请参阅：w3schools.com/cssref/sel_nth-child.asp。

使用选择器可以设置每个标签的背景。示例：如果您有7个链接并且想要设置第5个背景使用：

.MyNavBar a:nth-child(7n+5) {width: 50px;background-image:url('MyImageurl');}

动态css类属性？

2 个答案: