单击链接时更改内容，Javascript

Change content when link is clicked, Javascript

本文关键字：Javascript 链接 单击      更新时间：2023-09-26

我在一个网站上处理过这个问题，我试图重新创建它，但现在它不起作用了。。。我希望在不加载的情况下通过Javascript替换div中的内容。

这是HTML:

<li><a onclick="mish()">Click me</a></li>
<div id="about">
  <h2>Im a header.</h2>
  <p>And Im a paragraph!</p>
</div>

这是JS，位于一个外部.JS文件中：

function mish()
{
document.getElementById("about").innerHTML='<h2>Header am I.</h2>
<p>Paragraph am I and too.</p>';
}

它们与html头部的这行链接（我也在正文中尝试过）：

<script type="text/javascript" src="script.js"></script>

同样，我从我做的另一个网站上复制了几乎所有的代码，这个网站仍然有效，所以我非常不知道为什么这个网站不起作用。

编辑：这是标题部分：

<head>
    <title>Shaq</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
</head>

双重编辑：全身：

<body>
<div class="crusty">
    <div class="content">
        <nav>   
            <ul>
                <li><a onclick="bout()">Click Me</a></li>
                <li><a onclick="mish()">Click Me</a></li>
            </ul>
        </nav>
        <div class="actual">
            <div id="about">
            <h2>Im a Header</h2>
            <p>And Im a Paragraph</p>
            </div>
        </div><!-- end actual -->
    </div><!-- end content-->
</div><!-- end crusty -->
</body>

并进行三次编辑以显示.js文件的确切内容：

function mish() {
    document.getElementById("about").innerHTML = '<h2>Header am I.</h2>'+ '<p>Paragraph am I and too.</p>';
}

您发布的代码片段没有向我们展示完整的HTML。尝试使用这个代码，因为这是你应该做的。

<html>
<head>
<script type="text/javascript">
   function mish() {
      document.getElementById("about").innerHTML = '<h2>Header am I.</h2><p>Paragraph am I and too.</p>';
    }
</script>
</head>
<body>
    <li><a onclick="javascript:mish();">Click me</a>
    </li>
    <div id="about">
         <h2>Im a header.</h2>    
         <p>And Im a paragraph!</p>
    </div>
</body>
</html>

这应该行得通。检查一下你在做什么不同。

如果您正在使用JS的外部文件，请将以下代码复制到JS文件：

   function mish() {
      document.getElementById("about").innerHTML = '<h2>Header am I.</h2><p>Paragraph am I and too.</p>';
    }

请确保不要将其包裹在<Script></script>标记中。你不需要这个。然后将这个JS文件保存在HTML文件所在的位置

最后包括在你的头部分：

<script type="text/javascript" src="script.js"></script>

而且，这必须奏效。

在JavaScript中编写多行字符串的常见做法如下。目前，字符串中有一个换行符（未转义），这在JavaScript中是不允许的。

function mish() {
    document.getElementById("about").innerHTML = [
        '<h2>Header am I.</h2>',
        '<p>Paragraph am I and too.</p>'].join(''n');
}

主要优点是可以在JavaScript字符串中将换行符作为'n进行通信。

相关文章：