如何更改此 javascript 仅使用 1 个链接答案

【问题标题】：How to change this javascript only to use only 1 link如何更改此 javascript 仅使用 1 个链接
【发布时间】：2013-08-02 14:37:18
【问题描述】：

我有 javascript:- 当我们点击“home”链接时，它会显示 home 的东西，然后当我们点击“about”链接时，它会显示 about 相关的东西。如何使这个只有一个按钮，并且那个 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.

【问题讨论】：

您希望按钮自动循环浏览页面吗？否则，按钮怎么会知道你在“关于”并且想要查看“家”？
按钮会是什么样子？我无法想象这个。
我想在按钮或图像链接上添加一个“箭头”图像。是的，通过 div 标签循环。这使用 4 个不同的链接转到 4 个 div。当我们进入 2nd DIV 时，2nd DIV 的按钮应将其带到 3rd DIV，然后该按钮将其带到 4th DIV

标签： javascript html

【解决方案1】：

其他建议都不错，但是 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];
}

【讨论】：

【解决方案2】：

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

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

Live Demo

【讨论】：

脚本不必进入头脑。它们只需要在触发使用它们的代码之前可用。将它们添加到 html 流的底部而不是头部是一种常见的性能改进，因此它们不会阻塞渲染。
@RayWadkins 这会使我的整个答案无效吗？我认为用户并不真正关心性能，否则他的代码会以不同的方式完成。关于 OP 的问题，我的回答仍然有效。为了满足您的需要，我在句子中添加了 or。我仍然非常怀疑这个脚本会阻止页面加载，即使在运行 P133 cpu 的 PC 上也是如此。

【解决方案3】：

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

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

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 并且那里有一些其他奇怪的东西。

【讨论】：

Icarus 你改变的只是小提琴的设置。代码是一样的。
是的，我知道。但是您的小提琴无法正常工作，因为设置不正确。
仅供参考，甚至在您纠正小提琴之前，我就对您的答案投了赞成票。如果我对某件事投反对票，我通常会这么说并解释原因，除非已经有其他人发表评论解释出了什么问题……
一般来说，它是针对反对者的。如果它在你身上，我会使用@标签。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review