Question

单击菜单按钮后，保持悬停和活动颜色

$('.menu-item a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

.menu-item {
    list-style: none;
} 
.menu-item a {
    padding: 20px;
    padding-bottom: 10px;
    border: 1px solid #1B3E70;
    color: #1B3E70;
    text-decoration: none;
}
.menu-item a:hover {
    background-color: #1B3E70;
    color: white;
}
.menu-item .active{
    background-color: #1B3E70;
    color: white;
}

<html>
<head>
    <link rel="stylesheet" type="text/css" href="check.css">
    <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="checking.js" type="text/javascript">
    </script>  
</head>

<body>
    <li class="menu-item">
        <a href="#">Home</a>
        <a href="#">jerome</a>
        <a href="#">ibrahim</a>
    </li>
</body>
</html>

Answer 1

~~您应该首先添加Jquery库。：\~~

你和你的代码没问题。问题必须是链接的Jquery库。检查该文件的路径是对还是错。您可以使用控制台中的网络资源选项卡来跟踪它。

$('.menu-item a').click(function(e){ $(this).addClass('active').siblings().removeClass('active'); });

.menu-item { list-style:none; } .menu-item a{ padding:20px; padding-bottom:10px; border:1px solid #1B3E70; color:#1B3E70; text-decoration:none; } .menu-item a:hover{ background-color:#1B3E70; color:white; } .menu-item .active{ background-color:#1B3E70; color:white; }

<html> <head> <link rel="stylesheet" type="text/css" href="check.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="checking.js" type="text/javascript"> </script> </head> <body> <li class="menu-item"> <a href="#">Home</a> <a href="#">jerome</a> <a href="#">ibrahim</a> </li> </body> </html>

Answer 2

工作正常。 Here is the working example

有两次机会不能使用您的代码

1）你没有正确地调用jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2）您没有使用$( document ).ready()来加载jQuery。

// A $( document ).ready() block.
$( document ).ready(function() {
   //add your code here
});

OR

// Shorthand for $( document ).ready()
$(function() {
    //add your code here
});

Answer 3

使用Jquery文件的相对路径。从根开始。

如果root用户使用jquery

/jquery-1.8.0.min.js

如果有像JS文件夹这样的内部文件夹 - 那么使用

/js/jquery-1.8.0.min.js

Answer 4

尝试将您的点击装订功能放入文档就绪功能

$( document ).ready(function() {
  $('.menu-item a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
  });
)};

Answer 5

替换行：

<link rel="stylesheet" type="text/css" href="check.css">
    <script src="jquery-1.8.0.min.js" type="text/javascript"></script>

带

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="check.css">

点击时不保留活动状态

5 个答案: