Javascript 在当前页面上设置活动类_Javascript_Php_Html_Css

Javascript 在当前页面上设置活动类

javascript php html css

Javascript 在当前页面上设置活动类,javascript,php,html,css,Javascript,Php,Html,Css,我有这个导航，但似乎找不到向当前页面添加.active类的解决方案。有人能帮我吗 <nav class="menu"> <ul class="menu-ul navigation"> <div class="menu-first"> <li><a href="index.php"><span class="main-title">X-BIKES</span></a></l

我有这个导航，但似乎找不到向当前页面添加.active类的解决方案。有人能帮我吗

<nav class="menu">
  <ul class="menu-ul navigation">
    <div class="menu-first">
      <li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
    </div>
    <div class="menu-second">
        <li><a href="index.php?page=events">Events</a></li>
        <?php if (empty($_SESSION['user'])): ?>
        <li><a href="index.php?page=login">Login</a></li>
        <li>/</li>
        <li><a href="index.php?page=register">Register</a></li>
      <?php else: ?>
        <li><a href="index.php?page=logout">Logout</a></li>

      <li class="menu-cart">
        <a href="index.php?page=cart">Cart (<?php
          if(empty($_SESSION['cart'])) {
            echo '0';
          }else {
            echo sizeof($_SESSION['cart']);
          };
      ?>)</a>
      </li>
      <?php endif; ?>
    </div>
  </ul>
</nav>

您可以使用

$\u GET

：

<nav class="menu">
  <ul class="menu-ul navigation">
    <div class="menu-first">
      <li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
    </div>
    <div class="menu-second">
        <li class="<?php echo $_GET['page'] == "events" ? "active" : ""; ?>" ><a href="index.php?page=events">Events</a></li>
        <?php if (empty($_SESSION['user'])): ?>
        <li class="<?php echo $_GET['page'] == "login" ? "active" : ""; ?>"><a href="index.php?page=login">Login</a></li>
        <li>/</li>
        <li class="<?php echo $_GET['page'] == "register" ? "active" : ""; ?>"><a href="index.php?page=register">Register</a></li>
      <?php else: ?>
        <li class="<?php echo $_GET['page'] == "logout" ? "active" : ""; ?>"><a href="index.php?page=logout">Logout</a></li>

      <li class="menu-cart <?php echo $_GET['page'] == "cart" ? "active" : ""; ?>">
        <a href="index.php?page=cart">Cart (<?php
          if(empty($_SESSION['cart'])) {
            echo '0';
          }else {
            echo sizeof($_SESSION['cart']);
          };
      ?>)</a>
      </li>
      <?php endif; ?>
    </div>
  </ul>
</nav>

您可以使用

$\u GET

：

<nav class="menu">
  <ul class="menu-ul navigation">
    <div class="menu-first">
      <li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
    </div>
    <div class="menu-second">
        <li class="<?php echo $_GET['page'] == "events" ? "active" : ""; ?>" ><a href="index.php?page=events">Events</a></li>
        <?php if (empty($_SESSION['user'])): ?>
        <li class="<?php echo $_GET['page'] == "login" ? "active" : ""; ?>"><a href="index.php?page=login">Login</a></li>
        <li>/</li>
        <li class="<?php echo $_GET['page'] == "register" ? "active" : ""; ?>"><a href="index.php?page=register">Register</a></li>
      <?php else: ?>
        <li class="<?php echo $_GET['page'] == "logout" ? "active" : ""; ?>"><a href="index.php?page=logout">Logout</a></li>

      <li class="menu-cart <?php echo $_GET['page'] == "cart" ? "active" : ""; ?>">
        <a href="index.php?page=cart">Cart (<?php
          if(empty($_SESSION['cart'])) {
            echo '0';
          }else {
            echo sizeof($_SESSION['cart']);
          };
      ?>)</a>
      </li>
      <?php endif; ?>
    </div>
  </ul>
</nav>

使用

页面

参数检查已单击的链接，并相应地设置类

例如，您可以在脚本的开头编写如下内容：

var page = $_GET['page'];

然后在以后的代码中

<a href="index.php?page=events" <?php if (page == 'events') echo 'class="active"' ?>>Events</a>

希望这是正确的语法。我上次编写php代码已经有一段时间了。

使用您的

页面

参数检查已单击的链接，并相应地设置类

例如，您可以在脚本的开头编写如下内容：

var page = $_GET['page'];

然后在以后的代码中

<a href="index.php?page=events" <?php if (page == 'events') echo 'class="active"' ?>>Events</a>

希望这是正确的语法。我上次编写php代码已经有一段时间了。

您可以使用$\u服务器['php\u SELF']获取当前页面

在比较当前页面宽度后，添加链接并添加class.active（如果它们相等）

<nav class="menu">
<ul class="menu-ul navigation">
<div class="menu-first">
<li><a href="index.php"><span class="main-title">X-BIKES</span></a>
</li>
</div>
<div class="menu-second">
<li><a <?= $_SERVER['PHP_SELF'] == 'index.php?page=events' ? 
'class="active"' : '' ?> href="index.php?page=events">Events</a></li>
<?php if (empty($_SESSION['user'])): ?>
<li><a href="index.php?page=login">Login</a></li>
<li>/</li>
<li><a href="index.php?page=register">Register</a></li>
<?php else: ?>
<li><a href="index.php?page=logout">Logout</a></li>
<li class="menu-cart">
<a  <?= $_SERVER['PHP_SELF'] == 'index.php?page=cars' ? 
'class="active"' : '' ?> href="index.php?page=cart">Cart (<?php
if(empty($_SESSION['cart'])) {
echo '0';
}else {
echo sizeof($_SESSION['cart']);
};
?>)</a>
</li>
<?php endif; ?>
</div>
</ul>

您可以使用$\u服务器['PHP\u SELF']获取当前页面

在比较当前页面宽度后，添加链接并添加class.active（如果它们相等）

<nav class="menu">
<ul class="menu-ul navigation">
<div class="menu-first">
<li><a href="index.php"><span class="main-title">X-BIKES</span></a>
</li>
</div>
<div class="menu-second">
<li><a <?= $_SERVER['PHP_SELF'] == 'index.php?page=events' ? 
'class="active"' : '' ?> href="index.php?page=events">Events</a></li>
<?php if (empty($_SESSION['user'])): ?>
<li><a href="index.php?page=login">Login</a></li>
<li>/</li>
<li><a href="index.php?page=register">Register</a></li>
<?php else: ?>
<li><a href="index.php?page=logout">Logout</a></li>
<li class="menu-cart">
<a  <?= $_SERVER['PHP_SELF'] == 'index.php?page=cars' ? 
'class="active"' : '' ?> href="index.php?page=cart">Cart (<?php
if(empty($_SESSION['cart'])) {
echo '0';
}else {
echo sizeof($_SESSION['cart']);
};
?>)</a>
</li>
<?php endif; ?>
</div>
</ul>

对于当前页面，如contact.php、about.php，我们可以使用变量$currentpage为不同页面指定不同的值

$currentPage = 'contact'; // current page is contact

在标题部分，如下面所示

<ul class="nav">
    <li class="<?php if($currentPage =='contact'){echo 'active';}?>" ><a href="contact.php">Contact</a></li>
    <li class="<?php if($currentPage =='about'){echo 'active';}?>" ><a href="about.php">About</a></li>
</ul>


对于当前页面（如contact.php、about.php）的活动菜单，我们可以使用$currentpage等变量为不同的页面指定不同的值
$currentPage = 'contact'; // current page is contact

在标题部分，如下面所示
<ul class="nav">
    <li class="<?php if($currentPage =='contact'){echo 'active';}?>" ><a href="contact.php">Contact</a></li>
    <li class="<?php if($currentPage =='about'){echo 'active';}?>" ><a href="about.php">About</a></li>
</ul>


您可以根据您的页面设置活动类
参数“添加.active类”是什么意思" ? 是否要查找链接何时处于活动状态？@Louis'LYRO'Dupont如果我在“事件”页面上，我希望看到颜色为“事件”的li元素。@ArtOsi你是什么意思？你能举个例子吗？比如在@Jonathan answer中，你可以根据你的页面参数设置活动类你说的“添加一个.active类”是什么意思" ? 是否要查找链接何时处于活动状态？@Louis'LYRO'Dupont如果我在“事件”页面上，我希望看到颜色为“事件”的li元素。@ArtOsi你是什么意思？你能举个例子吗？类似于@Jonathan Answer，你也可以用JS来做，但最终你会看到一些非样式菜单。PS-我注意到你是新来的，欢迎！通过单击答案左侧的灰色复选框，您可以接受最能解决问题的答案。这让其他人知道你已经找到了你想要的。你也可以用JS来做，但最终你会看到一个非样式菜单的闪光。PS-我注意到你是新来的，欢迎！通过单击答案左侧的灰色复选框，您可以接受最能解决问题的答案。这让别人知道你已经找到了你想要的东西。