我需要Javascript关闭吗？

对于下面的额外代码，有什么更好的方法来实现这一点。我需要关闭吗？如果是的话，怎么样？我需要Javascript关闭吗？

我有一个左侧导航和鼠标悬停我需要显示页面内容。我在css里有一个类.first{visibility:visible;top:150px;}

这就是我用来完成这个的。

<script type="text/javascript"> 
    $(function() { 
     var $items = $("#sidebar > ul >li") 

     $("#mainabout").addClass("first"); 
     $(".about").mouseover(function() { 
      $("#mainabout").addClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
      //$("#main").css("background-image","url('revoliution2010_btbg.png')"); 
     }); 

     $(".education").mouseover(function() { 
      $("#maineducation").addClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".experience").mouseover(function() { 
      $("#mainexperience").addClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".projects").mouseover(function() { 
      $("#mainprojects").addClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".contact").mouseover(function() { 
      $("#maincontacts").addClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 

     }); 
    }) 
</script>

我该如何让这个jquery小巧并优化，或者有什么更好的方法来做到这一点。

来源

2011-04-26 singularity

我在那个代码中看到了一个模式。如果你可以在代码中看到一个模式，你可以使它更小。发布你的HTML并提供你想要完成的更多细节。我假设这是一个菜单 – JohnP 2011-04-26 05:12:04

我会去用：

$(".education").mouseover(function() { 
    $items.removeClass("first"); 
    $("#maineducation").addClass("first"); 
}); 
// etc..

，你可以用抽象更进了一步：

var regover = function (source, main) { 
    source.mouseover(function() { 
     $items.removeClass("first"); 
     main.addClass("first"); 
    }; 
};

您的注册电话仅仅是：

regover($(".education"), $("#maineducation"));

很小的！

只要确保在定义$items的相同范围内定义regover即可。这就是“闭包”的意思 - 函数引用外部范围中的变量。例如：

var $items = ...; 
var regover = function(source, main) { ... }

这样函数可以“看到”$items变量。

来源

2011-04-26 05:12:20 luqui

您可以编写一个函数，删除所有第一类。现在在添加你需要的一个类之前调用这个函数。

来源

2011-04-26 05:14:11 timbooo

我需要Javascript关闭吗？

回答

相关问题