Question

我为导航栏创建了一个活动ID，但是当我尝试创建一个非活动类并将其应用到其他菜单选项时，它不起作用：

<!-- Navbar -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" >


<div class="container-fluid">

    <!-- header start -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_bar_collapsed" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="http://joshpjackson.com/home.php">
            <img src="images/logo3.png" alt="logo" style="width:70px;height:40px;margin-top:-7px;">
        </a>
    </div>

    <div class="collapse navbar-collapse" id="nav_bar_collapsed">

        <ul class="nav navbar-nav">

            <li id="active_menu">

                <a href="http://joshpjackson.com/home.php">Home</a>

            </li>


            <li class="inactive_menu">

                <a href="http://joshpjackson.com/about.php">About</a>

            </li>

            <li class="inactive_menu">

                <a href="http://joshpjackson.com/portfolio.php">Portfolio</a>

            </li>

            <li class="inactive_menu">

                <a href="http://joshpjackson.com/contact.php">Contact Me</a>

            </li>

        </ul>


        <form class="navbar-form navbar-right" role="search">

            <div class="form-group">

                <input type="text" class="form-control" placeholder="Search">

            </div>

            <button type="submit" class="btn btn-default">Submit</button>

        </form>
    </div>  
</div>
</nav>

css在这里：

#active_menu>a {

    background-color:#ffffff;
    color: #4284f3;

}

.inactive_menu>a {

color: #ffffff;

}

我做错了什么？提前谢谢！

Answer 1

通常以更简单的方式完成。您正在寻找Here

<ul>
    <li class="active"><a>Option1</a></li>
    <li><a>Option2</a></li>
    <li><a>Option3</a></li>
</ul>

ul li a {
    color: white;
    background-color: black;
}

ul li.active a {
    color: black;
    background-color: white;
}

Answer 2

    Here is the fix:

    <ul class="nav navbar-nav **inactive_class**">   -- remove the inactive class

    And in css  instead of 

    .inactive_class li a {
        color: #ffffff;
    }

    write this

    li.inactive_class a {
        color: #ffffff !important;
    }

为bootstrap navbar创建非活动类

2 个答案: