帝国导航支持二级栏目高亮(纯PHP)

<li class="<?=$public_r[home]?'active':''?>"><a href="[!--news.url--]">首页</a></li>
<li class="<?=$GLOBALS[navclassid]==0?'active':''?>"><a href="[!--news.url--]">首页</a></li>
<?php
$ecms_bq_sql=sys_ReturnEcmsLoopBq('select classid,classname,classpath from [!db.pre!]enewsclass where bclassid=0 and showclass=0 order by myorder limit 8',20,24,0);    
$bqno=0;
while($bqr=$empire->fetch($ecms_bq_sql))
{
$bqsr=sys_ReturnEcmsLoopStext($bqr);
$bqno++;
?>
<li class="dropdown">
    <a href="<?=$public_r[newsurl]?><?=$bqr[classpath]?>"  data-toggle="dropdown" class="<?=currentPage($GLOBALS[navclassid],$bqr[classid])?>">
        <?=$bqr[classname]?>
        <b class="fa fa-angle-down"></b>
    </a>
    <ul class="dropdown-menu nav_two">
        <?php
            $ecms_bq_sql2=sys_ReturnEcmsLoopBq("select classid,classname,classpath from [!db.pre!]enewsclass where bclassid='$bqr[classid]' order by myorder limit 5",20,24,0);
            $bqno2=0;
            while($bqr2=$empire->fetch($ecms_bq_sql2))
        {
        $bqsr2=sys_ReturnEcmsLoopStext($bqr2);
        $bqno2++;
        ?>
        <li><a href="<?=$public_r[newsurl]?><?=$bqr2[classpath]?>"><?=$bqr2[classname]?></a></li>
        <?php
            }
            ?>
    </ul>
</li>

<?php
}
?>

两种方式判断首页高亮,其中使用 $GLOBALS[navclassid] 来判断当前栏目的ID

如果是"0",说明当前栏目没有ID,那么肯定就是首页了。

使用灵动标签,循环输出属于根目录下的一级栏目。

 

e\class\userfun.php里添加自定义函数:

function currentPage($classid,$thisid){
global $class_r;
$fr=explode('|',$class_r[$classid][featherclass]);
$topbclassid=$fr[1]?$fr[1]:$classid;
if ($topbclassid==$thisid) {
echo "on";
}
else {
}
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用以下代码实现 Nuxt.js 中导航点击高亮,并且点击二级导航时一级导航仍然高亮的功能。 1. 在 `nuxt.config.js` 中定义路由的 `linkActiveClass` 和 `linkExactActiveClass`: ``` // nuxt.config.js export default { // ... router: { linkActiveClass: 'active', linkExactActiveClass: 'exact-active', }, // ... }; ``` 2. 在模板中添加导航: ``` <template> <div> <nav> <ul> <li :class="{ active: $route.path === '/' }"> <nuxt-link to="/">首页</nuxt-link> </li> <li :class="{ active: $route.path.startsWith('/about') }"> <nuxt-link to="/about">关于我们</nuxt-link> <ul> <li :class="{ active: $route.path === '/about/history' }"> <nuxt-link to="/about/history">历史</nuxt-link> </li> <li :class="{ active: $route.path === '/about/team' }"> <nuxt-link to="/about/team">团队</nuxt-link> </li> </ul> </li> <li :class="{ active: $route.path.startsWith('/contact') }"> <nuxt-link to="/contact">联系我们</nuxt-link> </li> </ul> </nav> <nuxt /> </div> </template> <script> export default {}; </script> <style> nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 20px; } nav ul li.active > a, nav ul li.exact-active > a { color: red; } </style> ``` 在上面的代码中,我们使用 `:class` 绑定了一个动态的类名,根据当前路由的 `path` 判断是否选中。对于一级导航,我们使用 `$route.path === '/'` 判断当前路由是否是首页,对于二级导航,我们使用 `$route.path.startsWith('/about')` 判断当前路由是否以 `/about` 开头。同时,我们还定义了 `active` 和 `exact-active` 两个类名,`active` 用于普通选中状态,`exact-active` 用于精确匹配选中状态。 希望这个例子对您有所帮助,如果还有其他问题,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值