我想在每次点击其中一个链接时更改标题,文字,youtube视频和图片。该页面不应该更改,只是我在下面示例中绘制的框中的文本和媒体:
|链接1 | ..................... |头...................... |
|链接2 | ..................... |段落文本.......... |
|链接3 | ..................... | _ __ _ __ _ __ _ __ _ ____ |
|链接4 | ..................... | ..................... | .. ........... |
|链接5 | ..................... | Youtube vid |图片|
|链接6 | ..................... | ..................... | .. ........... |
首先是Header / Paragraph框,youtube vid和图片应该以文本和媒体开头,如果按下Link 1,它也应该出现。然后,每次按下另一个Link,文本和媒体只会淡出,新的文字和媒体将会淡出。
就像点击链接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);
});
});
没有工作
答案 0 :(得分:0)
我认为你可以有一些课程 - 比如这个
<style>
.hideDIV { display:none; },
.showDIV { display:block; }
</style>
因此,您可以将hideDIV类设置为除link1之外的所有textDIV。
例如,当您点击link2时,某些类似的功能将完成工作:
function showTextDIV2()
{
$("#textDIV2").removeClass("none");
$("#textDIV2").addClass("showDIV");
//Make sure all the other DIVs are not visible
$("#textDIV1").removeClass("showDIV");
$("#textDIV1").addClass("none");
}
希望这可以帮到你。 此致!
答案 1 :(得分:0)
我认为你应该试试js error event
。例如,<script> try
{ ....your full scripts here....}
catch(err)
{alert("occured error: " + err.message);}
</script>
。这些将警告您的代码中的错误及其发生的可能性!祝你好运