gpt4 book ai didi

javascript事件类在特定页面上有不同的颜色

转载 作者:行者123 更新时间:2023-11-28 10:45:00 28 4
gpt4 key购买 nike

如何使“.active”类具有不同的颜色,该颜色将由页面名称指定;例如“.active_index”和“.navbar”中所有链接的悬停颜色将与“.active_index”相同?我使用 header 的 include php 选项(include('header.php');)。这是我的代码:

HTML 代码

<nav>
<div class="navbar">
<ul>
<li id="pageIndex"><a href="index.php">Početna</a></li>
<li id="pageZeolit"><a href="zeolit.php"><i class="fa fa-angle-down" aria-hidden="true"></i>Zeolit</a></li>
<li id="pageIzodenko"><a href="izodeko.php"><i class="fa fa-angle-down" aria-hidden="true"></i></i>Izodeko</a></li>
<li id="pageElektronika"><a href="elektronika.php"><i class="fa fa-angle-down" aria-hidden="true"></i></i>Elektronika</a></li>
<li id="pageInformacije"><a href="informacije.php">O nama</a></li>
</ul>
</div>

JAVASCRIPT 代码

if (pageName == 'index.php') {
active_index.setAttribute(color, red);
}

最佳答案

PHP 逻辑可能还可以改进,但这里有一个想法......

首先,使用PHP获取HTTP请求URI,并在<html>中添加一个类或<body>标签。 (例如 <html class="index-page"> 然后,在适用于事件列表项和悬停列表项的 CSS 选择器中使用该类(例如 .index-page .navbar a:hover.index-page .navbar li.active > a )。最后,在 active 文件中应用您的 header.php 类- 再次使用 HTTP 请求 URI。

page.php

<?php
// Get $pageClass (ex. "index-page" or "zeolit-page")
$uri = preg_replace('/^\//', '', $_SERVER['REQUEST_URI']);
if(strlen($uri) === 0) { $uri = 'index.php'; }
$pageClass = str_replace('.php', '-page', $uri);
?>

<!DOCTYPE html>
<html class="<?php echo $pageClass; ?>">
<head>
...
<link href="style.css" rel="stylesheet">
</head>
<body>
<?php include('header.php'); ?>
...

样式.css

.index-page .navbar a:hover,
.index-page .navbar li.active > a { color: white; }

.zeolit-page .navbar a:hover,
.zeolit-page .navbar li.active > a { color: green; }

...

header.php

<?php $activeClass = 'active'; ?>
<nav>
<div class="navbar">
<ul>
<li class="<?php echo ($_SERVER['REQUEST_URI'] === '/index.php' ? $activeClass : '') ?>" id="pageIndex">
<a href="index.php">Početna</a>
</li>
<li class="<?php echo ($_SERVER['REQUEST_URI'] === '/zeolit.php' ? $activeClass : '') ?>" id="pageZeolit">
<a href="zeolit.php"><i class="fa fa-angle-down" aria-hidden="true"></i>Zeolit</a>
</li>
...
</ul>
</div>
</nav>

或者,您可以在自己的 CSS 文件中使用特定于页面的样式。可以将其放置在默认 CSS 文件下方以覆盖/自定义默认页面样式。同样,PHP 逻辑可以在这里改进,但是你可以这样做,例如......

<head>
...
<link href="default.css" rel="stylesheet">
<?php if ($_SERVER['REQUEST_URI'] === '/') { // this is "index.php" ?>
<link href="index.css" rel="stylesheet">
<?php } elseif ($_SERVER['REQUEST_URI'] === '/zeolit.php') { ?>
<link href="zeolit.css" rel="stylesheet">
<?php } ?>
...
</head>

关于javascript事件类在特定页面上有不同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44830604/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com