使用jQuery更改標題，段落和<iframe>/<img>標籤點擊

我想每次點擊其中一個鏈接時更改標題，文本，YouTube視頻和圖片。該頁面是不應該改變，只是文本和媒體在下面的例子中，我「畫」的箱子：使用jQuery更改標題，段落和<iframe>/<img>標籤點擊

|友情鏈接1 | .............. ....... |頭...................... |
|鏈接2 | ..................... |段落文本.......... |
|鏈接3 | ..................... | _ __ _ __ _ __ _ __ _ ____ |
|鏈接4 | ..................... | ..................... | ............. |
|鏈接5 | ..................... | Youtube vid |圖片|
|鏈接6 | ..................... | ..................... | ............. |

所有頁眉/段落框首先，YouTube的VID和圖片應該與具有文本，並且也應該出現，如果你按下鏈接1.然後媒體開始，每次按下另一個鏈接，文字和媒體將淡出，新的文字和媒體將淡入。

如果您點擊鏈接2，某些文字會消失並且會出現新內容，對於媒體也是如此。

我想用jQuery/JavaScript來做到這一點！

請幫助我！

HTML：

<ul id="entireList"> 
    <li class="singleList"> 
    <a class="link" href="#" id="link1"> 
     Link 1 
    /a> 
    </li> 
    <li> /* the same for all of the 6 links, different id and text ofc */ 
    ... 
</ul>

的盒子：

<div class="text"> 
</div> 

<div class="media"> 
</div>

的Javascript/jQuery的：

var h1 = 'Header text for link 1' 
var p1 = 'Paragraph text for link 1' /* I'll make one for each link */ 

$(function() { 
    $('div.text').show().html(h1 + p1); /* Shows the text from Link 1 asap */ 

    $('a.link #link1').click(function() { /* When click on link, text will change */ 
    $('div.text').html(h1 + p1); 
    }); 
});

沒有什麼作品

來源

2013-07-03 user2546414

也給你的HTML代碼 –

我想你可以有一些類 - 這樣的

<style> 
    .hideDIV { display:none; }, 
    .showDIV { display:block; } 
</style>

因此，您可以爲除link1以外的所有textDIV設置hideDIV類。

而當你點擊鏈接2，例如 - 這樣的一些功能將做的工作：

function showTextDIV2() 
{ 
$("#textDIV2").removeClass("none"); 
$("#textDIV2").addClass("showDIV"); 

//Make sure all the other DIVs are not visible 
$("#textDIV1").removeClass("showDIV"); 
$("#textDIV1").addClass("none"); 
}

希望這能爲你做的工作。關心！

來源

2013-07-03 12:00:31

謝謝，它的工作：D – user2546414

偉大:)你可以標記答案爲接受，如果它不打擾你。謝謝！ –

我認爲你應該試試js error event。例如，<script> try { ....your full scripts here....} catch(err) {alert("occured error: " + err.message);} </script>。這些將提醒您的代碼中的錯誤以及它發生的位置！祝你好運

來源

2013-07-03 12:14:24

使用jQuery更改標題，段落和<iframe>/<img>標籤點擊

回答

相關問題