尝试调试 jquery 的".hover"事件

Question

我正在使用 3 个选项卡，悬停事件似乎没有启动。我有一些PHP来确定我们是否应该使用不同的图像源，因此PHP。据我所知，PHP 正在吐出正确的 SRC。

代码：

$("#tab1").hover(
  ("#tab1").attr("src","img/home_menu_images/png/home_mainmenu_hover_tab1.png"),
  ("#tab1").attr("src","PHP_SRC1"));
$("#tab2").hover(
  ("#tab2").attr("src","img/home_menu_images/png/home_mainmenu_hover_tab2.png"),
  ("#tab2").attr("src","PHP_SRC2"));
$("#tab3").hover(
  ("#tab3").attr("src","img/home_menu_images/png/home_mainmenu_hover_tab3.png"),
  ("#tab3").attr("src","PHP_SRC3"));

其中PHP_SRC(num)是围绕回显$tab_image_(num)的 PHP 打开和关闭标记。

Answer 1

我的第一个倾向是你在mouseover, mouseout函数开始时缺少$。尝试将它们添加到：

$("#tab1").hover(
    $("#tab1").attr("src", "img/home_menu_images/png/home_mainmenu_hover_tab1.png"),
    $("#tab1").attr("src", "PHP_SRC1")
);
$("#tab2").hover(
    $("#tab2").attr("src", "img/home_menu_images/png/home_mainmenu_hover_tab2.png"),
    $("#tab2").attr("src", "PHP_SRC2")
);
$("#tab3").hover(
    $("#tab3").attr("src", "img/home_menu_images/png/home_mainmenu_hover_tab3.png"),
    $("#tab3").attr("src", "PHP_SRC3")
);

如果这不起作用，请尝试将它们包装在匿名函数中：

$("#tab1").hover(
    function () {$("#tab1").attr("src", "img/home_menu_images/png/home_mainmenu_hover_tab1.png");},
    function () {$("#tab1").attr("src", "PHP_SRC1");}
);
$("#tab2").hover(
    function () {$("#tab2").attr("src", "img/home_menu_images/png/home_mainmenu_hover_tab2.png");},
    function () {$("#tab2").attr("src", "PHP_SRC2");}
);
$("#tab3").hover(
    function () {$("#tab3").attr("src", "img/home_menu_images/png/home_mainmenu_hover_tab3.png");},
    function () {$("#tab3").attr("src", "PHP_SRC3");}
);

Answer 2

从我自己的角度来看，我真的不喜欢 jquery 选项卡......有一种更简单的方法来制作标签...您添加与 ul li 标签相结合的 HTML 锚点，然后在它们上添加 jQuery 点击事件......在点击事件中，您创建一个$post或一个$get，然后在div 容器中渲染您呜咽的内容......这比使用这些选项卡控件要简单得多...

<ul class="menu">
  <li><a onclick="function1()" class="active">tab1</a></li>
  <li><a onclick="function2()">tab2</a></li>
</ul>
<div id="content">
</div>
<script>
  function function1() {
     $('#content').html('Loading...');
        $.get("/yourdomain/someurl1", { }, function(data) {            
            $('#content').html(data);
        });
  }
  function function2() {
     $('#content').html('Loading...');
        $.post("/yourdomain/someurl2", { id: 1}, function(data) {            
            $('#content').html(data);
        });
  }
</script>

这取决于你