Question

我试图更新单个div的内容，而不是尝试在我的网站上创建大量不同的页面，而当导航栏中的不同项目单击以更新maint div内容时。我试图用Javascript找到一个简单的例子：

        <script type="text/javascript">
            function ReplaceContentInContainer(id,content) {
                var container = document.getElementById(id);
                container.innerHTML = content;
            }
        </script>


          <div id="example1div" style="border-style:solid; padding:10px; text-align:center;">
            I will be replaced when you click.
        </div>
        <a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>' )">
            Click me to replace the content in the container.
        </a>

当我只尝试更新文本时这很好用，但当我在那里放一个img标签时，正如你所看到的那样，它就会停止工作。

无论哪种 1）我如何尝试这样做有什么问题？或者2）有什么更好/更容易的方法呢？

我不是坚持使用Javascript。 jQuery也可以工作，只要它简单或容易。我想创建一个函数，让我传入任何我想要更新的HTML并将其插入div标签并取出“旧”HTML。

Answer 1

你有一些逃避问题：

ReplaceContentInContainer('example1div', '<img src='2.jpg'>')
                                                   ^     ^

内部'需要进行转义，否则JS引擎会看到ReplaceContentInContainer('example1div', '<img src='以及后续2.jpg'>')导致的一些语法错误。将呼叫更改为（有关转义HTML中<和>的{{3}}的提示{/ 3}}：

ReplaceContentInContainer('example1div', '&lt;img src=\'2.jpg\'&gt;')

使用jQuery执行此操作的一种简单方法是在链接中添加ID（例如“idOfA”），然后使用cHao' answer（这比使用innerHTML更具跨平台性）：

<script type="text/javascript">
    $('#idOfA').click(function() {
        $('#example1div').html('<img src="2.jpg">');
    });
</script>

Answer 2

首先，不要将复杂的JavaScript代码放在href属性中。它很难阅读或维护。使用<script>标记或将您的JavaScript代码放在一个单独的文件中。

其次，使用jQuery。 JavaScript是一种奇怪的野兽：它的模式背后的原则并没有考虑到现代的Web开发。 jQuery为您提供了很多功能，而不会让您陷入JavaScript的怪异境地。

第三，如果您的目标是避免为所有（或许多）页面无休止地复制相同的基本结构，请考虑使用模板系统。模板系统允许您将特定内容插入包含站点公共元素的支架中。如果听起来很复杂，那是因为我没有很好地解释它。谷歌，你会发现很多很棒的资源。

依赖JavaScript进行导航意味着您的网站不会被搜索引擎正确编入索引，并且对于关闭JavaScript的用户来说完全无法使用。依赖JavaScript实现基本功能越来越普遍 - 也可以接受。但是，您的网站至少应该为离散页面提供合理且持久的网址。

现在，所有这一切，让我们回答你的问题。这是在jQuery中实现它的一种方法。这不是最严格，最严格的实现，但我试图使一些非常易读：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Example</title>
    <style type="text/css" media="all">
        /* all content divs should be hidden initially */
        .content {
            display: none;
        }

        /* make the navigation bar stand out a little */    
        #nav {
            background: yellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- navigation bar -->
    <span id="nav">
        <a href="#about_me">about me</a> |
        <a href="#copyright">copyright notice</a> |
        <a href="#my_story">a story</a>
    </span>

    <!-- content divs -->
    <div class="content" id="about_me">
        <p>I'm a <strong>web developer</strong>!</p>
    </div>
    <div class="content" id="copyright">
        <p>This site is in the public domain.</p>
        <p>You can do whatever you want with it!</p>
    </div>
    <div class="content" id="my_story">
        <p>Once upon a time...</p>
    </div>

    <!-- jquery code -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
    // Wait for the document to load
    $(document).ready(function() {
        // When one of our nav links is clicked on,
        $('#nav a').click(function(e) {
            div_to_activate = $(this).attr('href'); // Store its target
            $('.content:visible').hide(); // Hide any visible div with the class "content"
            $(div_to_activate).show(); // Show the target div
        });
    });
    </script>
</body>
</html>

好的，希望这有帮助！如果jQuery看起来很有吸引力，请考虑从this tutorial开始。

Answer 3

您的示例的主要问题（除了innerHTML之外并不总是支持）是<和>如果没有转义就可以轻松破解HTML。请改用<和>。（别担心，它们会在JS看到它们之前被解码。）你可以使用引号相同的技巧（使用"而不是"来解决引用问题。）

使用javascript更新div的内容

3 个答案: