如何优雅的处理 [当前 active] 的 A 标签

2016-03-23 20:00:10 +08:00
 cevincheung
@section('nav')
<ul class="nav menu">
        <li class="active"><a href="index.php"><span class="glyphicon glyphicon-dashboard"></span> 用户中心首页</a></li>
        <li><a href="transfer.php"><span class="glyphicon glyphicon-th"></span> 充值 /提现</a></li>
        <li><a href="withdraw-history.php"><span class="glyphicon glyphicon-stats"></span> 提现记录</a></li>
        <li><a href="profile.php"><span class="glyphicon glyphicon-user"></span> 账户 /修改密码</a></li>
        <li><a href="certificate.php"><span class="glyphicon glyphicon-credit-card"></span> 实名认证</a></li>
        <li role="presentation" class="divider"></li>
        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span>退出登录</a></li>
</ul>
@stop

难道非要一个个的 if...echo..active 么？

2430 次点击
所在节点    PHP
6 条回复
SUBMAIL
2016-03-23 21:52:45 +08:00
<body id="glyphicon-dashboard">
<ul class="nav menu">
</body>

#glyphicon-dashboar .nav .glyphicon-dashboard{}

这样处理呢？
cevincheung
2016-03-23 22:15:00 +08:00
@SUBMAIL
没有更好的方法了么- -
SoloCompany
2016-03-23 23:07:43 +08:00
莫当真

ob_start();
…
$nav = ob_get_contents();
ob_end_clean();
echo str_replace("<li><a href=\“$page\”", “<li class=“ active"><a href=\“$page\”", $nav);
oott123
2016-03-23 23:17:48 +08:00
你应该把整个导航写成一个循环……这样就稍微优雅一点了。
iNaru
2016-03-24 09:56:05 +08:00
用 js
```javascript
(function(n){
[].forEach.call(document.querySelectorAll('.nav a'), function(a, i){
a.parentNode.classList[(location.href.indexOf(a.href) == 0 ||
(n == '' && i == 0) ? 'add' : 'remove')]('active');
});
})(location.href.split('/').pop().split(/[\?#&]/).shift());
```
cevincheung
2016-03-24 14:54:56 +08:00
@iNaru
好吧，用 js 貌似也是个不错的选择。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/265847

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX