基于Silverstripe图像的菜单

我想在Sliverstripe中创建一个图像和文本菜单，如下所示：

我想让jquery选择一个单独的ID并替换背景图像。Silverstripe给了我菜单，如下图所示。如何设置此菜单

输出

<ul>
<li class="current">
<a title="video" href="/cfl/index.php/">Home</a>
</li>
<li class="link">
<a title="alarm" href="/cfl/index.php/about-us/">About Us</a>
</li>
<li class="link">
<a title="auto" href="/cfl/index.php/contact-us/">Contact Us</a>
</li>
</ul>

模板文件

<nav class="primary">
    <span class="nav-open-button">²</span>
    <ul>
        <% loop $Menu(1) %>
            <li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
        <% end_loop %>
    </ul>
</nav>

²

---

谢谢。

这应该很简单，在SilverStripe模板中，您可以用普通HTML做任何事情。当然还有其他变量和特性

因此，您可以简单地为这些项提供一个ID或css类。 让我给你举个例子：

<nav class="primary">
    <span class="nav-open-button">²</span>
    <ul>
        <% loop $Menu(1) %>
            <li class="$LinkingMode position-$Pos" id="$URLSegment"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
        <% end_loop %>
    </ul>
</nav>

当然，在任何javascript代码中，您都可以执行相同的操作（在您的例子中是框架jquery）：

---

但是，我强烈建议您使用CSS，没有理由使用javascript来完成设置背景图像这样的简单任务。

为什么要使用jquery？您可以使用css来实现这一点。但是为了帮助你分享你的模板文件。我想只要选择每个项目并在jquery中更改bg，如果有一个更简单的方法会很棒的话。哇，非常感谢你，效果非常好，我决定采用CSS方法。也谢谢你的建议。

.position-1 { background: green; }
.position-2 { background: yellow; }
.position-3 { background: blue; }

// we can also use the ID to style the element:
#home { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-image: url(http://placehold.it/100x100); 
}

jQuery(document).ready(function($) {
    $('.position-1').hover(function() {
         alert('you moved over the first item');
    });
});