javascript - HTML 头文件，改变按钮状态

Question

我目前正在构建一个基本网站。到目前为止一切顺利，但它变得相当困惑。一个原因是我的每个页面都有一个单独的标题，因为我没有脚本来在悬停时或当按钮链接到的页面是当前页面时更改按钮。

我有这些按钮状态:

• ????_selected_idle(如果按钮链接到事件页面则事件)
• ????_selected_hover(如果按钮链接到当前页面并且用户悬停则激活)
• ????_default_idle(正常激活)
• ????_default_hover(正常事件+悬停)

????可以是'home','about','register','products','contact'

所以总共有 20 张图片。

这是我现在使用的(在“关于”页面上):

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_default_idle.jpg" onmouseover="this.src='/Images/home_default_hover.jpg'" onmouseout="this.src='/Images/home_default_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

这里是相同的代码，但在主页上。

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_selected_idle.jpg" onmouseover="this.src='/Images/home_selected_hover.jpg'" onmouseout="this.src='/Images/home_selected_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

非常感谢任何帮助!如果你想看看这里的网站是 link.

• 如果您访问该页面还没有太注意内容，它仍然是一个 WIP。 编辑:

---

现在我有五个基本页面。

• 主页
• 关于
• 联系方式
• 注册
• 产品

所有 这些页面都有自己的标题。这些 header 位于单独的 文件中。我的目标是制作适用于所有页面的单个 header 。

但是，我有这么多头文件是有原因的。我将它们分开，因为按钮会根据您所在的页面改变状态。

假设你在HOME页面，HOME按钮比这张图: - home_selected_idle

如果您将鼠标悬停在该按钮上，它必须更改为: - home_selected_hover

如果您在“关于”页面上查看“主页”按钮，则它必须是: - home_default_idle

如果您将鼠标悬停在该按钮上，它将变为: - home_default_hover。

基本上我的iamge结构是这样的: - pagename_state_mousestate

• 页面名称
  • 家
  • 关于
  • 产品
  • 注册
  • 联系
• 状态
  • 默认
  • 已选择
• 鼠标状态
  • 空闲
  • 悬停

Answer 1

好的，我会给你一个 php 的小例子:

对于标题链接，您将要使用 CSS 而不是图像。

您需要像这样动态更改每个元素的类:

<div class="<? if($_SERVER['PHP_SELF']=="home.php"){echo "selected";}else{echo "ghosted";} ?>" > HOME </div>

您只需为每个格式复制粘贴该格式。不需要 JQuery 库，它太简单了。只需将您的图像修改为 CSS，无论如何这是标准的，图像需要很长时间才能加载鼠标悬停事件，而 CSS 更灵活。