jQuery的褪色内容+ DIV变化

Question

我这个小啄： http://jsfiddle.net/7hqyq/

而且因为我是新来的jQuery，我想知道如何更改选定方的背景颜色（因此的第一个广场上加载页面）。以及如何淡入/淡出细节div的内容文本。

在此先感谢;）

HTML：

<div class="square" contentId="c1"></div> 
<div class="square" contentId="c2"></div> 
<div class="square" contentId="c3"></div> 
<div class="square" contentId="c4"></div> 

<div id="details">Content for div 1</div> 

<div style="display: none" id="c1"> Content for div 1</div> 
<div style="display: none" id="c2"> Content for div 2</div> 
<div style="display: none" id="c3"> Content for div 3</div> 
<div style="display: none" id="c4"> Content for div 4</div> 

CSS：

.square{ 
width: 80px; 
height: 80px; 
margin: 10px; 
float: left; 
background: #CCC; 
} 

#details{ 
width: 380px; 
height: 100px; 
margin: 10px; 
float: left; 
background: #999; 
} 

的jQuery：

$(".square").on("click", function() { 
    var id= $(this).attr("contentId"); 
    $("#details").html($("#" + id).html()); 
}); 

Answer 1

选中此项。它不会变淡你的背景只是改变文本：http://jsfiddle.net/7hqyq/2/

$('.square:first').css('background-color', 'red'); 
$(".square").on("click", function() { 
var id= 'Content for div ' + $(this).attr("contentId"); 
$('#details').fadeOut(function(){ 
    $(this).text(id).fadeIn(); 
}) 
}); 

我也做了这样它设置背景颜色为红色，然后根据该div的，你点击了变化。 （是你的意思吧？）

Answer 2

这工作：

$(".square").on("click", function() { 
    var id= $(this).attr("contentId"); 
    $(this).css('background','red'); 
    $('#details').fadeOut('slow', function() { 
     $(this).html($("#" + id).html()).fadeIn('slow'); 
    }); 
}); 

的jsfiddle：http://jsfiddle.net/EFbtj/

注意这变淡灰色背景出/入为好。如果你想防止这种情况，将div包装在一个具有背景的包装div中。另外，您可以用$（this）.addClass（'yourClassName'）替换$(this).css('background','red');;`如果您更喜欢使用类而不是为背景添加内联css。

Answer 3

所有你需要的是这样的：
Live demo

function fader(i){ 
    $('#details >div').stop().fadeTo(400,0) // All 
    .eq(!i?i:$(this).index()).fadeTo(400,1); // indexed one 
} 

$(".square").on("click", fader); 

^{您也可以立即传送到fader的索引号即叫元件上的褪色：fader(0);（见演示）}

有了这个简单的HTML标记：

<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 

<div id="details"> 
    <div> Content for div 1</div> 
    <div> Content for div 2</div> 
    <div> Content for div 3</div> 
    <div> Content for div 4</div> 
</div> 

这个CSS：

.square{ 
    width: 80px; 
    height: 80px; 
    margin: 10px; 
    float: left; 
    background: #CCC; 
    cursor:pointer; 
} 
#details{ 
    width: 380px; 
    height: 100px; 
    margin: 10px; 
    clear:both; 
    float: left; 
    background:#999; 
} 
#details > div{ 
    position:absolute; 
    width: 380px; 
    height: 100px; 
    display:none; 
} 

BTW contentId是无效的属性。如果您确实需要处理自定义属性，那么请参阅data-*属性。

Answer 4

这里是另一种方法：

$(document).ready(function() { 
$('.nav-link').css('background-color', '#ececec'); 
$('#display-content').html($('#content-01').html());  
$('.nav-link').on('click', function() { 
$('.nav-link').css('background-color', '#ececec'); 
var navLinkId = $(this).attr('id').substr(4); 
$(this).css('background-color', '#dadada'); 
$('#display-content').fadeOut('slow', function() { 
$('#display-content').html($('#content-' + navLinkId).html()).fadeIn('slow'); 
}); 
}); 
}); 

HTML：

<div id="display-content"></div> 
<div id="nav-container"> 
    <ul> 
     <li class="nav-link" id="nav-01">01</li> 
     <li class="nav-link" id="nav-02">02</li> 
     <li class="nav-link" id="nav-03">03</li> 
     <li class="nav-link" id="nav-04">04</li> 
    </ul> 
</div> 
<div class="content-container" id="content-01"> 
    <p>Content layer 01</p> 
</div> 
<div class="content-container" id="content-02"> 
    <p>Content layer 02</p> 
</div> 
<div class="content-container" id="content-03"> 
    <p>Content layer 03</p> 
</div> 
<div class="content-container" id="content-04"> 
    <p>Content layer 04</p> 

的jsfiddle：http://jsfiddle.net/portashqipe/0a35cLwk/