0

我正在尝试在 Jquery 中制作一个简单的导航栏。我想让文本在悬停时更改颜色，并且在单击文本以保持悬停颜色时。真的很简单，我在 css 中使用 hover: 然后在 JQuery 中使用 on click 函数完成了这个没问题。问题是一切正常，直到单击导航栏的一项。单击导航栏项目后：悬停不再起作用？我对 css 很“满意”，但对 jQuery 很陌生。我希望这不是一个愚蠢的问题，但在过去的 2 个小时里，我一直在尝试使用各种 jQuery 代码来解决这个问题！代码变得更长，我修复了 1 个问题，然后创建了另一个问题！如果您检查 JSFiddle，您会注意到翻转工作，直到单击一个！我希望 :hover 继续处理 2 个未点击的链接！ 这是 JSFiddle

非常感谢您的帮助。

代码如下：

<!DOCTYPE html>
<head>
    <title>Help!</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style type="text/css">
      #wedding-tips, #general-tips, #travel-tips{ cursor: pointer;}
      #wedding-tips:hover, #general-tips:hover, #travel-tips:hover{color: #bc2021;}
    </style>

    <script>
      $(document).ready(function(){
      $("#wedding-tips-container, #travel-tips-container").hide();

      $("#general-tips").click(function(){
      $("#wedding-tips-container,#travel-tips-container").hide('slow');
      $("#general-tips-container").show('slow');
      $("#general-tips").css("color","#bc2021");
      $("#wedding-tips,#travel-tips").css("color","#000");
      });

      $("#wedding-tips").click(function(){
      $("#general-tips-container,#travel-tips-container").hide('slow');
      $("#wedding-tips-container").show('slow');
      $("#wedding-tips").css("color","#bc2021");
      $("#general-tips,#travel-tips").css("color","#000");
      });

      $("#travel-tips").click(function(){
      $("#general-tips-container,#wedding-tips-container").hide('slow');
      $("#travel-tips-container").show('slow');
      $("#travel-tips").css("color","#bc2021");
      $("#wedding-tips,#general-tips").css("color","#000");
      });     
      });
    </script>
</head>

<body>

 <div id="content-selector-div">
    <div id="general-tips">General Photography Tips</div>
    <div id="wedding-tips">Wedding Photography Tips</div>
    <div id="travel-tips">Travel Photography Tips</div>
 </div><br />

<div id="general-tips-container">
    <p>General Tips Here</p>
</div>

<div id="wedding-tips-container">
    <p>Wedding Tips Here</p>
</div>

<div id="travel-tips-container">
    <p>Travel Tips Here</p>
</div>

</body>
</html>
4

2 回答 2

3

它不工作的原因很简单：当你在元素上“手动”设置颜色时，它会比悬停颜色具有更高的“优先级”并且会一直存在：

$("#wedding-tips,#travel-tips").css("color","#000"); --> problem

创建您自己的类（我们称其为“当前”）并在用户单击导航时添加/删除 --> http://jsfiddle.net/dmJ8p/

于 2014-02-22T19:07:23.330 回答
1

使用 jquery addClass 和 removeClass 函数

$(document).ready(function () {
 $("#wedding-tips-container, #travel-tips-container").hide();

 $("#general-tips").click(function () {
    $("#wedding-tips-container,#travel-tips-container").hide('slow');
    $("#general-tips-container").show('slow');
    $("#general-tips").addClass("active");
    $("#wedding-tips,#travel-tips").removeClass("active");
 });

  $("#wedding-tips").click(function () {
    $("#general-tips-container,#travel-tips-container").hide('slow');
    $("#wedding-tips-container").show('slow');
    $("#wedding-tips").addClass("active");
    $("#general-tips,#travel-tips").removeClass("active");
 });

 $("#travel-tips").click(function () {
    $("#general-tips-container,#wedding-tips-container").hide('slow');
    $("#travel-tips-container").show('slow');
    $("#travel-tips").addClass("active");
    $("#wedding-tips,#general-tips").removeClass("active");
 });
});

http://jsfiddle.net/KAxmS/1/

用更少的代码查看新的小提琴http://jsfiddle.net/KAxmS/2/

于 2014-02-22T18:59:22.960 回答