发表新帖
发表新帖

Make Twitter Bootstrap navbar link active

前端 未结
关注
9 956
情深已故
情深已故 2020-11-30 21:33

What\'s the standard way to make the active link in a Twitter Bootstrap navbar bolded? It\'s clear that a link gains the active appearance by gaining the \"active\" class. F

相关标签:
9条回答
  • 遇见更好的自我
    2020-11-30 21:52

    You can try:

    $('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

    It would be best to give your nav an id attribute though, because you may have more than one nav on a page with the nav class.

    $('#main-nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

    Alternatively, instead of using .css('font-weight', 'bold'), you could just put this in the stylesheet:

    .active {
    font-weight: bold;
}
    0 讨论(0)
  • 暖寄归人
    2020-11-30 21:52

    You can solve it with CSS.

    Add a class to the body of each page:

    <body class="home">

    Or if you're on the contact page:

    <body class="contact">

    Then take this into consideration when you're creating your styles:

    ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; } 
ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; }

    Lastly, apply class names to your list items:

    <ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

    This point, whenever you're on the body.home page, your li.home a link will have default styling indicating it is the current page.

    0 讨论(0)
  • 太阳男子
    2020-11-30 21:53

    If you assign $pageTitle to the page name, you can do this without javascript

    <ul class="nav navbar-nav">

      <li <?php if ($pageTitle == "Website Development") {echo 'class="active"';} ?>>
      <a href="website-development.php">
       Web Development
      </a>
      </li>...</ul>
    0 讨论(0)
  • 有刺的猬
    2020-11-30 21:56

    http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

    This tutorial has a great and ultimate solution for this "problem". I was dealing with it a while ago and working great for me, customizable as well

    $(document).ready(function() {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
    0 讨论(0)
  • 说谎
    2020-11-30 21:56

    If you do not want to deal with server side and in the case where all hrefs are simple, like '/page.php', you can call 

    $('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');

    after page is loaded.

    0 讨论(0)
  • 孤独总比滥情好
    2020-11-30 22:10

    You need to ensure that you set the active class as part of the request response (as the page loads) and not before ie when the user clicks a link to request a different page.

    First you need to determine which navlink should be set as active and then add the active class to the <li>. The code would look something like this

    Tested by asker:

    HTML within php file

    Call a php function inline within the <li> markup passing in the links destination request uri

    <ul class="nav">
    <li <?=echoActiveClassIfRequestMatches("home")?>>
        <a href="home.php">Search</a></li>
    <li <?=echoActiveClassIfRequestMatches("about")?>>
        <a href="about.php">About</a></li>
</ul>

    PHP function

    The php function simple needs to compare the passed in request uri and if it matches the current page being rendered output active class

    <?php 

function echoActiveClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="active"';
}

?>
    0 讨论(0)
 看不清?
提交回复
热议问题