【问题标题】:jquery lavalamp focus [duplicate]jquery lavalamp焦点[重复]
【发布时间】:2010-01-05 04:17:03
【问题描述】:

可能重复:
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/

【问题讨论】:

  • 不要在一天内两次问同一个问题:#1997544

标签: jquery css xhtml


【解决方案1】:

您的每个页面都将主页链接设置为class='current' 如果您想让每个页面的菜单项突出显示,那么您需要:

A) 更新您的 WordPress 代码,让不同的页面生成不同的导航链接(换句话说,让每个页面的菜单项 &lt;li&gt; 设置为 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 的内置 Conditional Tag 功能。

这就是Doug Neiner 试图建议你做的事情。

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

A B 更强大,因此是我推荐的选项。

【讨论】:

  • 不确定你对选项 a 的意思,我对此很陌生。
  • 您可以访问您正在使用的 WordPress 模板吗?
  • 我愿意。如果您说将菜单中所有
  • 的所有类更改为当前类,我试过了,但没有用。
  • 戴维,您不能将它们全部更改为class='current',因为如果您这样做,lavalamp 默认选择您的&lt;ul&gt; 中的第一个元素。您需要做的是为每个页面写出不同的菜单。
  • 当除了内容框之外的一切都是静态的时,有什么好的方法可以解决这个问题?菜单列表在我的 page.php
  • 【解决方案2】:

    您需要一些方法来告诉 lavalamp 要将当前选定的项目设置到哪个链接。

    示例代码具有 href="#" 因此它可能会在单击时将其状态保留在某些 javascript 对象中。当您单击其中一个链接时,以前的页面状态消失了。

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签