使用Javascript更改div的内容

我试图在单击锚标记时更改id为#latestgames的div的内容。此代码就在关闭正文标记之前使用Javascript更改div的内容

<script type="text/javascript"> 
    $(function(){ 
$("a").click(function(){ 
    if($(this).attr("id") == "web") { 
     $("#latestgames").html("<div> 

      </div>") 
    } 
    else if($(this).attr("id") == "app") { 
     $("#latestgames").html("<div> 

      </div>") 
    } 
else if($(this).attr("id") == "uni") { 
     $("#latestgames").html("<div> 

      </div>") 
    } 
    else if($(this).attr("id") == "other") { 
     $("#latestgames").html("<div> 

      </div>") 
     } 
    }); 
});  
</script>

如果相关，每个div的内容将填充一个ul。锚标记的名单如下

<li class="portfolio"><a id="web" href="javascript:void(0);">Web Development</a></li> 
<li class="portfolio"><a id="app" href="javascript:void(0);">Web Development</a></li> 
<li class="portfolio"><a id="uni" href="javascript:void(0);">Web Development</a></li> 
<li class="portfolio"><a id="other" href="javascript:void(0);">Web Development</a></li>

在脑子里，我打电话以下

<script type='text/javascript' src='https://ajax.googleapis.com/ajax 
/libs/jquery/1.7.2/jquery.min.js'></script>

任何有识之士，以什么我可能是做错了，将不胜感激的！

来源

2013-06-21 Ian Butler

请更新您的帖子，以表明您希望发生什么以及现在发生了什么不正确的事情。包括任何相关的行为或错误。 –

问题，请更换

$("#latestgames").html("<div> 

    </div>") 
}

是你的新行导致未终止声明（你应该看看控制台的任何错误，这会给你一些线索）：

$("#latestgames").html("<div> 

    </div>")

也简化您的代码：

$(function() { 
    $("a").click(function() { 
     var id = this.id; //get the id and cache it 
     var html = ""; 
     switch (id) { //switch the value 
      case "web": 
       html = "somehtml"; 
       break; 
      case "app": 
       html = "somehtml"; 
       break; 
      case "uni": 
       html = "somehtml"; 
       break; 
      case "other": 
       html = "somehtml"; 
       break; 
     } 
     $("#latestgames").html(html); // set the html 
    }); 
});

调用$(this).attr("id") manytimes不好也只是访问ID与this.id，不要打扰的jQuery为...

来源

2013-06-21 21:30:56 PSL

@PSL嗨，我尝试使用您的switch语句，但仍然没有运气，你能给我的什么来取代一个简单的例子。‘somehtml’ –

@IanButler在这里你去：http://jsfiddle.net/LBYGh/ – PSL

@IBanButler定义“没有运气”。什么发生而不是你所期望的。 –

其实，在JavaScript中，你不能在一行上打开一个字符串，并关闭它后面的多行。

你应该

$("#latestgames").html("<div></div>") 
}

来源

2013-06-21 21:29:55 Tronix117

谢谢你做到了！ –

这在一定程度上起作用。我用包含一些简单文本的div中的无序列表对它进行了测试，结果很有用。我真正想要的是一张图像清单。我试过输入下面的代码，它停止工作？

我发现了一个解决方案，它是更优雅一点，写的提供了更大的灵活性div的内容。我希望这可能对某人有用。这正好刚刚结束标记之前：

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
    $('#menu ul li a').click(function(){ 
    $('#web').load('portfolio.html #' + $(this).attr('href')); 
    return false; 
    }); 
    }); 
</script>

以下HTML的网页需要去：

<div> 
    <nav id="menu"> 
    <ul class="portfolionav"> 
     <li class="portfolionav"><a href="web">Web Development</a></li> 
    <li class="portfolionav"><a href="app">App Development</a></li> 
    <li class="portfolionav"><a href="uni">University/Early Work</a></li> 
    <li class="portfolionav"><a href="other">Other Stuff</a></li> 
    </ul> 
    </nav> 
</div> 

<div id="web"> 
    <!--Any default HTML goes in here--> 
</div>

JavaScript引用的我创建并上传到所谓portfolio.html服务器中的HTML文件。该文件包含以下内容：

<div id="web"> 
    <!--Any required HTML goes in here--> 
</div> 

<div id="app"> 
    <!--Any required HTML goes in here--> 
</div> 

<div id="uni"> 
    <!--Any required HTML goes in here--> 
</div> 

<div id="other"> 
    <!--Any required HTML goes in here--> 
</div>

来源

2013-06-22 21:03:46

使用Javascript更改div的内容

回答

相关问题