javascript - 显示/隐藏 js 中的目标 Div 状态

Question

好的，所以我在这里使用这段代码来显示和隐藏选项卡开关样式基础中的 div：http: //jsfiddle.net/AXj53/4/

    jQuery('a[id^="link"]').click(function(){
    var vid_id = jQuery(this).attr("id").replace("link", "#testVid");
    jQuery('div[id^="testVid"]').hide();
    jQuery(vid_id).show();

我想制作悬停状态和选定 div 的状态，但我似乎无法让它工作，我可以用 JS 做些什么来为悬停和选定链接提供一种嵌入阴影？

非常感谢所有帮助。

Answer 1

This can be done in JS, but its easier to leverage the CSS selectors :active and :hover which don't require JS event binding. You can also add a CSS style for the selected item and then toggle which element gets the .selected class inside the click event's callback.

Updated your jsfiddle here http://jsfiddle.net/AXj53/16/ adding the CSS selectors for :hover, :active, and .selected and the element class toggling in JS:

$(this).addClass('selected');
$(this).siblings().removeClass('selected');