显示/隐藏 js 中的目标 Div 状态答案

【问题标题】：Target Div state in show/hide js显示/隐藏 js 中的目标 Div 状态
【发布时间】：2013-02-25 10:57:09
【问题描述】：

好的，所以我在这里使用这段代码来显示和隐藏标签切换样式中的 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 做些什么来为悬停和选定链接提供一种嵌入阴影？

非常感谢所有帮助。

【问题讨论】：

在问题中包含相关代码。
我已经把它全部放在了 jsFiddle 但我想改变选择状态的位是 css .left{font-family:'helvetica_bqregular'; color:#666; display:inline-block; width:145px; border:thin solid #CCC; text-align:center; background-color:#eee; border-radius:4px; border-top-right-radius:0px; border-bottom-right-radius:0px; margin-left:13px; margin-top:9px; margin-bottom:10px;padding-top:5px; padding-bottom:5px;}
请编辑问题并将相关代码放在那里，而不是在 cmets 中。
如果我理解正确，您想知道哪个选项卡处于活动状态并设置按钮样式。这段代码应该是解决方案。 jsfiddle.net/AXj53/8 它在当前选择的选项卡上添加了一个“活动”的 css 类，以便您可以使用 css 对其进行样式化

标签： javascript html css show-hide

【解决方案1】：

这可以在 JS 中完成，但更容易利用不需要 JS 事件绑定的 CSS 选择器 :active 和 :hover。您还可以为所选项目添加 CSS 样式，然后在单击事件的回调中切换哪个元素获取 .selected 类。

在此处更新了您的 jsfiddle http://jsfiddle.net/AXj53/16/，为 :hover、:active 和 .selected 添加了 CSS 选择器，并在 JS 中切换了元素类：

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

【讨论】：