jquery lavalamp 的问题答案

【问题标题】：Trouble with jquery lavalampjquery lavalamp 的问题
【发布时间】：2010-01-04 13:25:19
【问题描述】：

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

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/

【问题讨论】：

我认为只显示相关的 css/代码会有所帮助。

标签： jquery css xhtml

【解决方案1】：

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

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

选择li 类为current 或第一项。您可以在发送到客户端之前在服务器上添加此类，无需在 javascript 中进行。

更新

当您的浏览器位于“/menu/”页面时，这就是导航的 HTML 外观。请注意带有指向Menu 的链接的li 如何具有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 页面上，带有指向 Events 的链接的 li 将具有以下类：

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

等等

【讨论】：

你能不能为一个菜鸟改写一下？
明白了，这是有道理的。唯一的问题是我正在使用 wordpress 为这个网站提供动力。
所以我要把它添加到脚本中吗？ curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
@Davey，编辑你的问题以删除 CSS 的大块，留下 jQuery 部分，然后在底部输入“EDIT”，然后粘贴到 WordPress 模板中写出的部分导航菜单。我会看看并尝试帮助您添加“当前”类。

【解决方案2】：

如果您使用的是this 扩展......

尝试将 'autoreturn' 设置为 true。

否则可能有一个选项来设置背景返回到哪个链接。在这种情况下，您必须将其设置为 onClick()。

尝试阅读文档。

此外，发布有关您正在使用的扩展程序的更多信息将是有益的。这不是 CSS 问题。

【讨论】：