如何在单击导航栏引导程序上更改活动类的颜色

时间:2015-12-19 04:24:49

标签: javascript php jquery css twitter-bootstrap

我正在使用引导程序导航栏,并希望更改单击活动类的颜色!我试过了!你能检查一下这个问题!

的Javascript

<script>
    $('.navbar-nav li a').on("click", (function () {
        $('.navbar-nav').find(".active").removeClass("active");
        $(this).parent().addClass("active");
    });
</script>

HTML

<nav class = "navbar navbar-inverse" role = "navigation">

    <div class = "navbar-header">
        <a class = "navbar-brand" href = "<?php echo(BASE_URL); ?>index.php">Computer Online Shop</a>
    </div>

    <div>
        <ul class = "nav navbar-nav">
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/products.php">Products</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/products.php?type=top">Top Products</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/products.php?type=new">New Products</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/shopping_cart.php">Shopping Cart</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>products/check_out.php"> Check Out </a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>deals.php">Deals</a></li>
            <li class="active"><a href="<?php echo(BASE_URL); ?>contactus.php">Contact US</a></li>
        </ul>
    </div>

</nav>

以下是此更改的现有结果!

Screenshot

3 个答案:

答案 0 :(得分:1)

<强> HTML

<ul class = "nav navbar-nav">
        <li class='active'><a href="<?php echo(BASE_URL); ?>products/products.php">Products</a></li>
        <li ><a href="<?php echo(BASE_URL); ?>products/products.php?type=top">Top Products</a></li>
        <li ><a href="<?php echo(BASE_URL); ?>products/products.php?type=new">New Products</a></li>
        <li ><a href="<?php echo(BASE_URL); ?>products/shopping_cart.php">Shopping Cart</a></li>
        <li ><a href="<?php echo(BASE_URL); ?>products/check_out.php"> Check Out </a></li>
        <li ><a href="<?php echo(BASE_URL); ?>deals.php">Deals</a></li>
        <li ><a href="<?php echo(BASE_URL); ?>contactus.php">Contact US</a></li>
    </ul>
  

您需要更改每个页面,只需在每个页面上应用“活动”类...加载哪个页面

或使用jquery的其他想法

<script>
        $('.navbar-nav li a').on("click", (function () {
            $('.navbar-nav li').removeClass("active");
            $(this).parent().addClass("active");
        });
    </script>

<script>
            $('.navbar-nav li').on("click", (function () {
                $('.navbar-nav li').removeClass("active");
                $(this).addClass("active");
            });
</script>

答案 1 :(得分:1)

你需要指定当前活动类的样式。

<script>
        $('.navbar-nav li a').on("click", (function () {
            $('.navbar-nav').find(".active").removeClass("active");
            $(this).parent().addClass("active");
            // add this line to specify color of active class
            $(this).parent().find(".active").css("color","Your Chosen Color");
        });
    </script>

答案 2 :(得分:1)

Plz检查以下代码

methodCallback
java.lang.NullPointerException
    at retrofit.ExecutorCallAdapterFactory$ExecutorCallback$1.run(ExecutorCallAdapterFactory.java:86)
    at android.os.Handler.handleCallback(Handler.java:615)
    at android.os.Handler.dispatchMessage(Handler.java:92)
    at android.os.Looper.loop(Looper.java:177)
    at android.app.ActivityThread.main(ActivityThread.java:4947)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1038)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:805)
    at dalvik.system.NativeStart.main(Native Method)

`