麻烦与jquery lavalamp [英] Trouble with jquery lavalamp

问题描述

由于某种原因，无论我点击什么链接，我的背景颜色都会回到最左边的链接。任何人都知道如何保持点击的链接？

For some reason my background color shoots back to the leftmost link no matter what link I click on. Anyone know how to get it to stay on the clicked link?

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/

推荐答案

您需要添加类当前到子页面上的当前 li 。 lavalamp插件运行这段代码：

You need to add the class current to the current li on the sub pages. The lavalamp plugin runs this bit of code:

curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

其中选择 li current 或第一个项目。

Which selects the li with a class of current or the first item. You can add this class on the server prior to sending to the client, no need to do it in javascript.

更新

这是导航的HTML，当你的浏览器在'/ menu /'页面时。请注意 li 与菜单的链接是否具有 class =current code>：

This is what the HTML would look like for the navigation, when your browser is at the '/menu/' page. Notice how the li with the link to Menu has the class="current":

<ul class="lavaLamp">
    <li><a href="http://wildfire-restaurant.com/">Home</a></li>
    <li class="current"><a href="http://wildfire-restaurant.com/menu/">Menu</a></li>
    <li><a href="http://wildfire-restaurant.com/events/">Events</a></li>
    <li><a href="http://wildfire-restaurant.com/friends/">Friends</a></li>
    <li><a href="http://wildfire-restaurant.com/contact/">Contact</a></li>
    <li><div class="left"></div></li>
</ul>

在 EVENTS 页面上， li 链接到事件将具有类：

On the EVENTS page, the li with the link to Events would have the class:

<li class="current"><a href="http://wildfire-restaurant.com/events/">Events</a></li>

等。

这篇关于麻烦与jquery lavalamp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！