jQuery的褪色內容+ DIV變化

我這個小啄： http://jsfiddle.net/7hqyq/jQuery的褪色內容+ DIV變化

而且因爲我是新來的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()); 
});

來源

2013-10-21 Pascal Gerritsen

'contentId'是無效的屬性，使用'數據內容識別= 「」'（！小寫） –

選中此項。它不會變淡你的背景只是改變文本：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-21 22:56:50

太棒了，這對JSFiddle來說太棒了，但是可悲的是我無法讓它在我的瀏覽器中工作......真的找不到爲什麼不能。你知道爲什麼嗎？這是html文檔： http://payitforwardarnhem.nl/help.txt –

它非常簡單。首先你忘了包含$（document）.ready（function（）{你的函數在這裏}）;並且腳本在頁面加載之前執行。如果您不想包含這些單詞，則需要將腳本移至HTML文件的末尾。接下來的問題是，你正在使用託管庫的jQuery - 爲了這個工作，你需要在服務器上託管你的頁面，而不僅僅是將它保存爲你的計算機上的HTML文件（我使用WAMP服務器），否則你需要下載完整的jQuery庫到您的計算機並將其作爲一個常規腳本包含它： –

您是我的英雄：P document.ready ..這基本上是第一課，我永遠不會忘記了; ）（我把它作爲一個.html文件上傳到服務器上，只是.txt以方便訪問）它現在就像一個魅力:) –

這工作：

$(".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。

來源

2013-10-21 22:51:39 mayabelle

這已經是一個很大的幫助。但是，有沒有可能讓第一個正方形的紅色加載，並且當另一個正方形激活時，其他方格會再次變爲灰色？ –

所有你需要的是這樣的：
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-*屬性。

來源

2013-10-21 23:27:51

這裏是另一種方法：

$(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-28 13:31:47

jQuery的褪色內容+ DIV變化

回答

相關問題