bootstrap插入一个自定义的类。无效？-慕课网

bootstrap插入一个自定义的类。无效？

来源：5-17 导航（胶囊形(pills)导航）

web_東

2018-07-28 22:52

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>基本用法</title>
    <link rel="stylesheet" href="../bs-3.3.7/css/bootstrap.min.css">
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jquery-2.0.0.min.js"></script>
    <!--<script src="../bs-3.3.7/js/bootstrap.min.js"></script>-->
    <style type="text/css">
        ul>li{
            cursor: pointer;
            border:1px solid #eeeeee;
        }
        .bg-color{
            display:block;
            background:#00FFFF;
        }

    </style>
</head>
<body>
<ul class="nav nav-pills">
    <li class=""><a href="#">首页</a></li>
    <li><a href="#">产品参数</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">技术支持</a></li>
    <li><a href="#">联系</a></li>
</ul>


<script>
    $("li").click(function () {
        $(this).addClass("bg-color").siblings().removeClass("bg-color");

    })




</script>
<!--
<script>
//    鼠标移入移出改变下拉菜单的背景色
    (function mouse() {
        $("li").mouseenter(function () {
            $(this).css("background-color","blue").siblings().css("background-color","#fff ");
        });
        $("li").mouseleave(function () {
            $("li").css("background","white");
        })
    })();
//    鼠标离开隐藏下拉菜单
    $(".dropdown-menu").mouseleave(function () {
        $(this).slideUp();
    });
//    鼠标点击按钮再次显示下拉菜单
    $("#dropmenus").on("click",function () {
        $("#menus").slideDown();
    });
    $("#dropmenu1").on("click",function () {
        $("#menu1").slideDown();
    });
//    弹出被点击的li菜单的文本内容
    $("li").click(function () {
        alert($(this).text());
    })
</script>
-->
</body>
</html>

写回答关注

1回答

bingbang1357

2018-08-01 20:59:42

<script>
    $("li").click(function() {
        $("li>a").removeClass("bg-color");
        $(this).find("a").addClass("bg-color");
    })
</script>
新手尝试回答,看看是这个意思不?

0 0

玩转Bootstrap（基础）

告诉你使用Bootstrap，并且能够独立定制出适合自己的Bootstrap

314546 学习 · 2275 问题

查看课程

相似问题

panel无效？Bootstrap v4.3.1

回答 1

回答 1

回答 1

回答 1

回答 2