jquery - 关于 Div 的问题；悬停，事件，内容

Question

所以我撞墙了……这可能是因为我累了。这是我目前的 fiddle 。 http://jsfiddle.net/Sketchs/vAx84/

当我将鼠标悬停在 div 上时，如何使它们突出显示，更具体地说，当它们是事件选项卡时，如何保持某种颜色，例如红色。那么，如何将信息推送到“content”div 中呢？我应该使用 jQuery 来 appendTo 吗？

谢谢

<div id="wrapper">
<div id="details">details:</div>
<div id="description">description:</div>

内容在这里

Answer 1

jsFiddle:http://jsfiddle.net/vAx84/2/

我添加了 btn 类，因此当您编写 css 时，您可以为所有按钮附加规则:

<div id="wrapper">
    <div id="details" class="btn">details:</div>
    <div id="description" class="btn">description:</div>
</div>
<div id="content">Content Goes Here</div>

悬停时突出显示的 CSS:

.btn:hover{
 background: #000 !important;   
}

要使您的 div 处于事件状态，您可以在您的 css 文件中创建事件的 css 类:

.active{
background: red;
}

然后使用 jQuery 像这样在点击时附加该类:

    $(".btn").on("click", function(){
        $(".btn").removeClass("active");
   $(this).addClass("active");
});

这会将您当前点击的按钮着色为红色(事件按钮)。

要将信息放入内容 div，您可以像这样使用 jQuery:

$("#details").text("some text");

或者点击详细信息按钮，例如:

    $("#details").on("click", function(){
   $("#content").text("some text");
});

请检查 jsfiddle 上的整个工作示例: http://jsfiddle.net/vAx84/2/