Question

我有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>

A working fiddle.

Answer 1

其他建议很好，但转换语句IMO过度使用，令人困惑并导致许多不必要的错误。这是使用对象的较短替代方案。

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];
}

Answer 2

小提琴中有大量的拼写错误和sytax错误。

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

<强> 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;
}

<强> Link to working fiddle

你错过了break并且还有一些奇怪的东西。

Answer 3

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

JavaScript代码必须放在<script type="text/javascript"></script>标记中的<head> HTML标记或中的<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;
}

如何更改此JavaScript只能使用1个链接

3 个答案:

HTML

的JavaScript

Live Demo