Question

我有一个动态导航栏，用于将页面/ URL存储在数据库中。 nav.php是处理显示和运行SQL查询以显示链接的脚本。我很难添加一个为链接添加活动类的脚本。

我的网页网址如下：

/页/ 2 /全方位服务舰队
/速率请求
/就业
/页/ 5 /链接
/页/ 6 /接触

PHP：

<nav>
  <?php

    while ($row = $result->fetch_assoc()) 
        {
            $navid = $row['id'];
            $navname = $row['nav'];
            $navslug = $row['slug'];
            $navurl = $row['url'];
            $navnum = $row['num'];

            if ($navurl != ''){
                $navlink = $navurl;
            } 
            else{
                $navlink = "page.php?id=".$navid."&title=".$navslug;
            }

            if (substr($navlink,0,4) != "http"){
                if ($server_name <> "") { 
                    $navlink = "http://".$server_name."/".$navlink;
                }
            }

            if ($navurl == '#'){
                $navlink = $navurl;
            }

            if ($navnum ==0){

        ?>

         <a href="<?php echo $navlink; ?>"><?php echo $navname; ?></a>
         <?php

            }else{
    ?>
    <!-- the rest isn't necessary -->
    ......
</nav>

Browser Rendered Output

正在显示的实际链接是以下行： <a href="<?php echo $navlink; ?>"><?php echo $navname; ?></a>

JS脚本：

jQuery(document).ready(function($){
  // Get current path and find target link
  var path = window.location.pathname.split("/").pop();

  // Account for home page with empty path
  if ( path == '' ) {
    path = 'index.php';
  }

  var target = $('nav a[href="'+path+'"]');
  // Add active class to target link
  target.addClass('active');
});

Answer 1

您可以按原样使用此代码，也可以从这个代码中获取一些想法：

<div class="w3-top" style="z-index: 999;">
<div class="navcontainer">
    <div class="w3-hide-small">
        <a href="" title="Home" class="w3-left w3-wide w3-hide-small"><img src="/images/-logo.png" alt="U.S. Transportation" title="" style=""></a>
        <div class="abovenav w3-right">
            <button class="w3-button w3-round-large" onclick="">Customer Login</button>&nbsp;
            <button class="w3-button w3-round-large" onclick="">Carrier Login</button>
        </div>
    </div>
    <div class="w3-bar nav w3-card-2 w3-left-align w3-large" style="text-overflow: auto;" id="nav">
        <div class="w3-hide-large w3-hide-medium">
            <a class="w3-hide-medium w3-hide-large w3-right w3-margin-right w3-text-white buttons" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><span class="fa fa-bars"></span></a>
            <a href="<?php
            if ($server_name <> "") {
                echo "http://" . $server_name . "/";
            }
            ?>/index.php" title="Home" class="w3-left w3-margin-left w3-text-white buttons"><span class="fa fa-home w3-xlarge"></span></a>
        </div>
        <div style="margin-right: 10%;">
            <nav>
                <?php
                include 'yortal\db.php';
                $sql = "SELECT *,(select count(*) from pages where parent = p.id) as num from pages p where parent = 0 and status = 'ON' order by sort DESC";
                $result = $mysqli->query($sql);

                while ($row = $result->fetch_assoc()) {
                    $navid = $row['id'];
                    $navname = $row['nav'];
                    $navslug = $row['slug'];
                    $navurl = $row['url'];
                    $navnum = $row['num'];
                    if ($navurl != '') {
                        $navlink = $navurl;
                    } else {
                        $navlink = "page.php?id=" . $navid . "&title=" . $navslug;
                    }
                    if (substr($navlink, 0, 4) != "http") {
                        if ($server_name <> "") {
                            $navlink = "http://" . $server_name . "/" . $navlink;
                        }
                    }
                    if ($navurl == '#') {
                        $navlink = $navurl;
                    }
                    if ($navnum == 0) {
                        $current_link = $_SERVER[REQUEST_URI];
                        $active_class = ($navlink==$current_link)?'active':'';
                        ?>
                        <a href="<?php echo $navlink; ?>" class="<?php echo $active_class; ?>" data-test="<?php echo $navlink.'=='.$current_link; ?>" class="w3-hide-small w3-right w3-text-white w3-padding-large buttons w3-margin-right" style="text-decoration: none; font-weight: bold;"><?php echo $navname; ?></a>
                        <?php
                    } else {
                        ?>
                        <div class="w3-dropdown-hover w3-hide-small w3-right" onclick="javascript:window.location.href = '<?php echo $navlink; ?>'">
                            <button class="w3-button"><?php echo $navname; ?></button>
                            <div class="w3-dropdown-content w3-white w3-card-4">
                                <?php
                                //Subpages
                                $sql2 = "SELECT *,(select count(*) from pages where parent = p.id) as num from pages p where parent = " . $navid . " and status = 'ON' order by sort";
                                $result2 = $mysqli->query($sql2);
                                while ($row2 = $result2->fetch_assoc()) {
                                    $dropid = $row2['id'];
                                    $dropname = $row2['nav'];
                                    $dropurl = $row2['url'];
                                    $dropslug = $row2['slug'];
                                    $dropnum = $row2['num'];
                                    if ($dropurl != '') {
                                        $droplink = $dropurl;
                                    } else {
                                        $droplink = "page.php?id=" . $dropid . "&title=" . $dropslug;
                                    }
                                    if (substr($droplink, 0, 4) != "http") {
                                        if ($server_name <> "") {
                                            $droplink = "http://" . $server_name . "/" . $droplink;
                                        }
                                    }
                                    if ($dropurl == '#') {
                                        $droplink = $dropurl;
                                    }
                                    ?>
                                    <?php
                                    $actual_link = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
                                    $active_class = ($actual_link==$droplink || $_SERVER[REQUEST_URI] == $droplink)?'active':'';
                                    ?>
                                    <a href="<?php echo $droplink;?>" class="<?php echo $active_class; ?>" data-test="<?php echo $actual_link.'=='.$droplink .'||'. $_SERVER[REQUEST_URI].' == '.$droplink; ?>"><?php echo $dropname; ?></a>
                                    <?php
                                }
                                ?>
                            </div>
                        </div><?php
                    }
                }
                ?>
            </nav>
        </div>
    </div>
</div>

Answer 2

首先，我很确定你可能错了path。我建议以下实现取决于each()：

$(document).ready(function(){
   loc = window.location.pathname;
   $("nav a").each(function(){
      if ($(this).attr("href") == loc){
         $(this).addClass("active");
         $(this).attr("href") = "#"; // to prevent link to the same page
         return true;
      }
   });
});

添加活动链接类

2 个答案: