3

我有这个小东西：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());
});
4

4 回答 4

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 更改它。（你的意思对吗？）

于 2013-10-21T22:56:50.983 回答
1

您所需要的只是：
现场演示

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;
}

BTWcontentId是无效属性。如果您确实需要处理自定义属性而不是使用data-*属性。

于 2013-10-21T23:27:51.740 回答
0

这有效：

$(".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');如果您更喜欢使用类而不是为背景添加内联 css，则可以用 $(this).addClass('yourClassName');` 替换。

于 2013-10-21T22:51:39.250 回答
0

这是另一种方法：

$(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/

于 2014-11-28T13:31:47.873 回答