-3

我有javascript：-当我们单击“主页”链接时，它会显示主页内容，然后当我们单击“关于”链接时，它会显示有关相关内容。如何使这个只有一个按钮，并且那个 1 按钮应该能够在点击时更改链接。这是代码。

<script type = "text/javascript" > function show(page) {
var html = "";
switch (page) {
    case "home":
        html = 'All the stuff of the page';
        break;
    case "about":
        html = 'All the stuff of the pahe';
        break;
    case "contact":
        html = "This is the contact page<br />...";
        break;
}
document.getElementById('container').innerHTML = html;
</script>

一个工作小提琴。

4

3 回答 3

0

其他建议很好，但是 IMO 的 switch 语句被过度使用、混淆并导致许多不必要的错误。这是一个使用对象的更短的替代方法。

function show(page) {
    var content = {
        home : 'All the stuff of the page<br />...',
        about : 'All the stuff about the page<br />...',
        contact : 'This is the contact page<br />...'
    }

    document.getElementById('container').innerHTML = content[page];
}
于 2013-08-01T15:40:05.707 回答
-2

在调用函数时添加一个参数，event参数，这将确保调用的默认行为AnchorDOMElement不会被触发event.preventDefault();。

JavaScript 代码必须放在HTML 标签<script type="text/javascript"></script>内的标签之间或标签的开头或结尾。<head><body>

HTML

<div id="container">This is the homepage<br />...</div>
<a href="#" title="Home" onclick="show(event,'home');">Home</a>
<a href="#" title="About" onclick="show(event,'about');">About</a>
<a href="#" title="Contact" onclick="show(event,'contact');">Contact</a>

JavaScript

function show(event, page) {
    /* This prevents the regular anchor behaviors */
    event.preventDefault();
    var html = "";
    switch (page) {
        case "home":
            html = 'All the stuff of the page  ';
            break;
        case "about":
            /* You forgot to close the ' properly here */
            html = 'All the stuff about the page';
            break;
        case "contact":
            html = "This is the contact  page<br/>...";
            break;
    }
    document.getElementById('container').innerHTML = html;
}

现场演示

于 2013-08-01T15:23:53.353 回答
-2

您的小提琴中有大量拼写错误和语法错误。

这是一个固定版本 - 如果这是你想要的。

HTML：

<div id="container">This is the homepage
    <br />...</div>
<a href="#" title="Home" onclick="show('home');return false">Home</a>

<a href="#" title="About" onclick="show('about');return false">About</a>

<a href="#" title="Contact" onclick="show('contact');return false">Contact</a>

JavaScript：

function show(page) {
    var html = "";
    switch (page) {
        case "home":
            html = 'All the stuff of the page  ';
            break;
        case "about":
            html = 'All the stuff of the pahe';
            break;
        case "contact":
            html = "This is the contact page<br />...";
            break;
    }

    document.getElementById('container').innerHTML = html;
}

链接到工作小提琴

你失踪break了，还有其他一些奇怪的东西。

于 2013-08-01T15:19:35.620 回答