Question

如何使用此图像标签系统构建一个突出显示当前页面的PHP导航菜单？

<a href="index.php" title="Home">
    <img src="images/menu/SR_MenuHome.gif" 
        alt="Home" 
        width="52" 
        height="31" 
        onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuHome.gif';"
        />
</a>
<a href="company.php" title="Company">
    <img src="images/menu/SR_MenuCompany.gif" 
        alt="Company" 
        width="76" 
        height="31" 
        onmouseover="this.src='images/menu/SR_MenuCompany-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuCompany.gif';" 
        />
</a>
<a href="investors.php" title="Investor Relations">
    <img src="images/menu/SR_MenuIR.gif" 
        alt="Investor Relations" 
        width="157" 
        height="31" 
        onmouseover="this.src='images/menu/SR_MenuIR-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuIR.gif';" 
        />
</a>

Answer 1

您可以使用get数组并设置一个确定突出显示的类的变量。

这可能是最原始的方法，但可以用于此目的。

$class = $_GET['selected_class'];

使您的URL可以使用GET数组超全局传递变量。

http://www.yourdomain.com/?selected_class=about

<a href="index.html" title="Home"  class="<?if(strcmp($class, 'about') ==0){echo 'selected';}?>"><img src="images/menu/SR_MenuHome.gif" alt="Home" width="52" height="31" onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" onmouseout="this.src='images/menu/SR_MenuHome.gif';"/></a>

对所有选项卡重复，更改strcmp函数中的名称以检查下一个相关类。这将使得所选类由URL确定。然后，您可以将突出显示的样式应用于.selected类。

您还可以使用javascript从get数组中获取此值并操作dom来设置类。这只是最基本的方法。

此外，如果你想要去所有CSS并且你的图像足够小，我会抛弃滚动事件并使用CSS中的按钮CSS背景图像来设置背景图像属性。 / p>

http://www.w3schools.com/CSS/css_pseudo_classes.asp

编辑：按要求编辑。这将为所选页面创建一个get变量。我要将这个变量添加到你的href attr中。所以点击加载变量的页面。

<? $class = $_GET['selected_tab']; ?>

<a href="index.php?selected_tab=home" title="Home">
    <img src="images/menu/SR_MenuHome.gif" 
        alt="Home" 
        width="52" 
        height="31" 
        class="<? if(strcmp($class,'home')==0){echo 'selected';} ?>"
        onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuHome.gif';"
        />
</a>
<a href="company.php?selected_tab=company" title="Company">
    <img src="images/menu/SR_MenuCompany.gif" 
        alt="Company" 
        width="76" 
        height="31" 
        class="<? if(strcmp($class,'company')==0){echo 'selected';} ?>"
        onmouseover="this.src='images/menu/SR_MenuCompany-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuCompany.gif';" 
        />
</a>
<a href="investors.php?selected_tab=investors" title="Investor Relations">
    <img src="images/menu/SR_MenuIR.gif" 
        alt="Investor Relations" 
        width="157" 
        height="31" 
        class="<? if(strcmp($class,'investors')==0){echo 'selected';} ?>"
        onmouseover="this.src='images/menu/SR_MenuIR-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuIR.gif';" 
        />
</a>

将.selected的样式添加到css文件中。如果你想让它们内联，可以在标题中加上一个样式标记并将它们放在那里。

   <style>
      .selected{border-bottom:2px #fff solid;}
</style>

在这个例子中，我只是在所选元素上放置一个border属性。你可以使用任何CSS样式。

编辑：

如果你想根据css而不是js改变图像的状态，你必须使用各种可用的伪选择器将动作转移到CSS。您可以通过使元素为块或内联块（取决于菜单的顺序，垂直或水平），然后根据状态设置background-image属性来完成此操作。这将消除对img标签的需要（这对于语义来说可能是一件好事。

所以如果你有一个像这样的链接菜单：

<a class="nav-item" href="one">Home</a><a class="nav-item" href="two">About</a>

您可以使用背景图像设置这些状态的样式

<style>
.nav-item
{display:inline-block; width:76px; height:31px; background-image:url('path/to/upstate_image.gif');}

.nav-item:hover
{background-image:url('path/to/hover_image.gif');}

.nav-item.selected
{background-image:url('path/to/selected_image.gif');}
</style>

请注意，在这种方法中，必须将所选元素添加到新的.nav-item类中，因此我之前提供的代码必须反映出来。

class="nav-item <? if(strcmp($class,'investors')==0){echo 'selected';} ?>"

这会将类添加到所有标记本身。使用此方法，标签会将您想要的图像作为背景图像加载，您甚至不需要担心img标签或任何js。

这是一个粗略的演示，使用更原始的CSS样式，如颜色和背景（我没有时间制作图像。）

http://www.idrivecreative.com/offsource/demo_for_detonate.php

http://www.idrivecreative.com/offsource/demo_for_detonate.php?selected_tab=company

您可以通过查看来源查看状态更改以及如何使用css完成这些更改。希望这会有所帮助。

http://www.w3schools.com/css/pr_background-image.asp

您是否需要语法方面的帮助。

PHP菜单导航

1 个答案: