使用jQuery在点击</iframe>上更改标题,段落和<iframe> / <img>标记

时间:2013-07-03 11:54:56

标签: jquery

我想在每次点击其中一个链接时更改标题,文字,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);
    });
});

没有工作

2 个答案:

答案 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>。这些将警告您的代码中的错误及其发生的可能性!祝你好运