Question

由于我是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

你需要的只是这个：
的 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 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).css('background','red');替换为$（this）.addClass（'yourClassName'）;`如果您更喜欢使用类而不是为背景添加内联css。

Answer 3

检查一下。它不会淡化您的背景只需更改文字：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 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/

jQuery淡出内容+改变div

4 个答案: