Lava lamp get current target tag id to change color

时间:2016-08-19 04:51:38

标签: jquery lavalamp

Am using http://nixbox.com/projects/jquery-lavalamp/demos/original.html熔岩灯插件。

我正在尝试更改菜单项的颜色仅当lavalamp效果影响它时。不是在选中或不是css悬停时。这个插件有一个回调函数hoverFinish,并且在http://nixbox.com/projects/jquery-lavalamp/demos/urltest/看到了一个startItem属性。我想用这个来挑选当前的高亮物品的id,只有当lalavalamp完成它时。

以下是一个示例,其中包含我想要捕获此内容的评论。

jQuery(window).load(function() {            
        $('header ul#mainmenu').lavaLamp({
            hoverFinish: function() {
        //Get current highlighted target tag
    }
        });
});

我这样做是因为我的悬停或者选择的文本颜色与菜单背景相同,所以当悬停离开菜单项时,它的文字看起来像背景,所以它“消失”。

1 个答案:

答案 0 :(得分:0)

我必须想出一个在插件实用程序之外执行此操作的方法:

jQuery(window).load(function() {

    $('header ul#mainmenu').lavaLamp(); //enable lavalamp plugin on the selected tag

    var selectedLava = $('ul#mainmenu li.selectedLava').index();// Get the current lavalamp highlighted  element index 

  //Always have the index of the lavalamp highlighted element

    $('ul#mainmenu li a').click( function(){
        selectedLava = $(this).parent().index(); 
    });

 //Change selectedLava class as desired on hover

    $('ul#mainmenu li').hover(
        function(){

            $('ul#mainmenu li.selectedLava').removeClass('selectedLava');
        },
        function(){
            $("ul#mainmenu li").eq(selectedLava).addClass('selectedLava');
        }
    );
});

这将使您有机会根据需要改变每个" lavalamped"元素...... :)希望这有助于某人...