【问题标题】:Dynamic dropdown menu using php with twitter bootstrap使用 php 和 twitter 引导的动态下拉菜单
【发布时间】:2013-04-17 14:18:36
【问题描述】:

感谢您阅读...我有 2 层导航。它按好,坏和评论计数对内容进行排序。如果用户点击好它会带来另一个按时间对内容进行排序的导航。例如今天、过去一周、过去一个月。

我可以使用$_SERVER['PHP_SELF'] 添加class='active',但twitter bootsrap 下拉菜单没有简单的class='active',它很复杂。我无法提出解决方案。我应该使用吗?前锋?我不知道。请查看代码中的 html 命令。这是我的代码。

<ul class="nav nav-tabs">
        <li <?php if (basename($_SERVER['PHP_SELF']) == '/?Top'): ?> class="active"<?php endif; ?>><a href="/?Top">Top Content</a></li> 
        <li <?php if (basename($_SERVER['PHP_SELF']) == '/?Bad'): ?> class="active"<?php endif; ?>><a href="/?Bad">Bad Content</a></li>
        <li <?php if (basename($_SERVER['PHP_SELF']) == '/?Comments'): ?> class="active"<?php endif; ?>><a href="/?Comments">Most Commented</a></li>
<!-- It's confusing me when It comes here... because as you see active option is not li tag. it's bunch of html code and also any url bellow can ben any of those up -->
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-time"></i> Today <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="URL=week" />Last 1 Week</a></li>
              <li><a href="URL=month" />Last 1 Month </a></li>
              <li><a href="URL=all" />All</a></li>
            </ul>
          </li>
    </ul>

html 推荐:当它来到这里时,我感到很困惑......因为正如你所见,活动的 li 不是 li,它是一堆 html 代码,而且下面的任何 url 都可以是其中的任何一个

【问题讨论】:

    标签: php html twitter-bootstrap


    【解决方案1】:

    您可以将"active" 类用于外部li(该类具有"dropdown" 类)和您的子下拉列表中的另一个"active" 类。

    这是一个例子

    <ul class="nav nav-tabs">
        <li class=""><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li class="dropdown active">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li class="active"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    

    JSBin 的现场演示

    【讨论】:

    • 非常感谢。我不知道 twitter bootsrap 可以做到这一点。谢谢。
    猜你喜欢
    • 2013-06-02
    • 1970-01-01
    • 1970-01-01
    • 2014-12-04
    • 2015-06-30
    • 1970-01-01
    • 1970-01-01
    • 2013-06-22
    • 2014-05-02
    相关资源
    最近更新 更多