动态下拉菜单使用php与twitter bootstrap

Question

Thank you for reading... I have a 2 layer of navigation. which sort the content by good, bad and comment count. if user clicks on good it will bring another nav which is sort the content by time. such as today, last one week, last one month.

I can add class='active' using $_SERVER['PHP_SELF'] but twitter bootsrap dropdown menu does not have simple class='active' it is complicated. I am not able to come up with a solution. should I use for? foreach? I don't know. please see the html command in the code. this is my code.

<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 commend: It's confusing me when It comes here... because as you see active li is not li it's bunch of html code and also also any url below can be any of those up

Answer 1

You can use the "active" class for the outter li (the one has class "dropdown") and another "active" class in your child dropdown.

This is an example

<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>

A live demo in JSBin