0

当我单击锚标记时，我正在尝试更改 ID 为 #latestgames 的 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>

任何关于我可能做错了什么的见解将不胜感激！

4

3 回答 3

2

实际上，在 javascript 中，您不能在一行上打开一个字符串，然后在多行之后关闭它。

你应该更换

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

    </div>")
}

和

  $("#latestgames").html("<div></div>")
}
于 2013-06-21T21:29:55.530 回答
1

问题是您的换行符导致未终止的语句（您应该查看控制台是否有任何错误，这将为您提供一些线索）：

$("#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")也不好，也只是访问 id this.id，不要打扰 jquery ......

于 2013-06-21T21:30:56.310 回答
0

我找到了一个更优雅的解决方案，并且为编写 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-22T21:03:46.030 回答