jquery lavalamp焦点

Question

可能重复：

Trouble with jquery lavalamp

由于某种原因，无论我点击哪个链接，我的背景色都会返回到最左边的链接。有人知道如何让它停留在点击的链接上吗？

css

#lamp {
float:left;
margin:25px 0px 0px 90px;
clear: both;
}

.lavaLamp {
position: relative;
height: 29px; width: 400px;
background: #000000 no-repeat top;
background-image:url('http://wildfire-restaurant.com/images/lampback.png');
padding: 15px; margin: 10px 0;
overflow: hidden;
float:left;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background:  no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: #BD5108 no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

jquery

<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

站点http://wildfire-restaurant.com/

Answer 1

您的每个页面都将主页链接设置为class='current'，如果希望让每个页面突出显示其菜单项，则需要：

( A)更新WordPress代码，以便不同的页面生成不同的导航链接(换句话说，使每个页面的菜单项<li>设置为class='current')

例如:在您的主页上有：

<ul>
<li class='current'><a href='#'>Home</a></li>
<li><a href='#'>Menu</a></li> ... etc.

菜单页代码需要如下所示：

<ul>
<li><a href='#'>Home</a></li>
<li class='current'><a href='#'>Menu</a></li> ... etc.

从Wordpress文档来看，最好是利用WordPress的内置功能。

这就是Doug Neiner建议你做的。

( B)使用javascript检查页面的URL，然后根据url更新导航链接。

A是far比B更健壮，因此是我推荐的选项。

Answer 2

您需要一些方法来告诉lavalamp什么链接设置当前选定的项目。

示例代码有href="#“，所以当单击javascript对象时，它可能会将其状态保持在某个javascript对象中。当您单击其中一个链接时，前面的页面状态将消失。