首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jQuery Lavalamp活动状态的问题

jQuery Lavalamp活动状态的问题
EN

Stack Overflow用户
提问于 2012-02-14 21:19:28
回答 1查看 842关注 0票数 0

下午好,当用户单击链接时,我很难将导航链接设置为活动状态。我有一个header.php文件,它保存导航和lavalamp id。header.php包含在每一页中。当我点击“关于”页面链接,这一行仍然保持在它的默认位置,即在“主页”链接。如果这有帮助的话,我将在php中运行它。

感谢你的help...Thank你。

header.php由以下html组成:

代码语言:javascript
复制
<div id="nav" class="grid_9 push_3">
<ul class="lavaLamp" id="lavaLampLine">
        <li><a href="index.php">HOME</a></li>
    <li><a href="about.php">ABOUT US</a></li>
    <li><a href="product.php">SUPPORT</a></li>
    <li><a href="blog">OUR BLOG</a></li>
        <li><a href="contact.php">CONTACT US</a></li>
</ul><!-- end menu -->
</div><!-- end nav -->

css:

整个/*菜单的LavaLamp样式*/

代码语言:javascript
复制
.lavaLamp {
    position: relative;
    height:15px;
    width:421px;
    margin:3px 0;
    padding:80px 0 0 0;
/* overflow: hidden; */
}
/* Force the list to flow horizontally */
.lavaLamp li {
    float:left;
    list-style:none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
    border-bottom:4px solid #3A7CB8;
    width:9px;
    height:15px;
    top:90px;
    position:absolute;
    z-index:8;
}

.lavaLamp li.back .left {
    border-bottom:4px solid #3A7CB8;
    height:15px;
    overflow:hidden;
 margin-right: 5px; /* 5px is the width of the rounded shape */
}
/* Styles for each menu-item. */
.lavaLamp li a {
    font-size:16px;
    font-weight:normal;
    text-decoration:none;
    display:inline;
    color:#095BA6;
    text-align:center;
    margin: auto 12px;
    display: block;
    float: left;
    cursor:pointer;
    outline: none;
    z-index:10;
    height:30px;
    position:relative;
}

.lavaLamp li a:hover, .lavaLamp li a:active, .lavaLamp li a:visited {
    border: none;
}
.active {
    border: none;
    color:#000000;
    font-weight:bold;
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-02-14 21:31:52

使用PHP /else语句将类"current“添加到您所使用的li中。

类似于:

代码语言:javascript
复制
<li <?php if(strpos($_SERVER["PHP_SELF"],"index.php") !== false) echo 'class="current'; ?>><a href="index.php" >HOME</a></li>

对于每个li,将"index.php“更改为它的任何文件名。这很低效..。你也可以这样做:

代码语言:javascript
复制
<?php
$parts = Explode('/', $_SERVER["PHP_SELF"]);
$currentFile = $parts[count($parts) - 1];
?>

然后在每一个李里你可以说:

代码语言:javascript
复制
<li <?php if($currentFile == "index.php") echo 'class="current'; ?>><a href="index.php" >HOME</a></li>

(资料来源:http://www.scriptygoddess.com/archives/2007/07/13/use-php-to-get-the-current-pagefile-name/)

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9284327

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档