Вопросы о Divs; hover, active, content

Question

Так что я столкнулся с стеной ... и это возможно, потому что я устал. Вот моя настоящая скрипка. http://jsfiddle.net/Sketchs/vAx84/

Как сделать divs выделены, когда я навис над ними, и, более конкретно, останется определенный цвет, например красный, когда они являются активной вкладкой. Затем, как я вставляю информацию в div «content»? Должен ли я использовать jQuery для appendTo?

Благодаря

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

Content Goes Here

Answer 1

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

Я добавил класс БТН так, когда вы пишете 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/

Answer 2

получить цвет при наведении мыши просто добавить :hover в новый класс для вкладок:

CSS:

#details:hover { 
    background-color:yellow; 
    } 

#description:hover { 
    background-color:red; 
    } 

Обновлена ​​скрипка: http://jsfiddle.net/vAx84/1/