Question

我试图找到一种在我的页面上制作替换按钮的方法。我查看了网络，但我找到的只是替换文字脚本。我想要的是替换我的h1标签中的文字和文章中的文字。如果可以将整个div替换为另一个div，那就太棒了。

要在我的页面上更准确地解释一下：www.bravitus.com 我想要在＆＃34; OM MIG＆＃34;部分，一个我可以切换内容的按钮，还有一些关于bravitus的信息。我想点击一个按钮，只替换橙色部分。

这是我的标记：

<div class="full-page" id="page-2">
<div class="container">
    <h1 style="color:white;" >Hvem er jeg</h1>
    <div class="columns eight"><article> Lorem ipsum </article>
</div>

我想要替换第2页中的所有内容，或者只是将整个页面2 div切换为另一个内容。

这可能吗？

Answer 1

我不确定我是否明白你想要的东西。

但是如果你只想替换第2页内的所有html，你就可以这样做（使用jQuery）：

var html = // Here comes your html
$('#page-2').html(html);

Answer 2

所以我不确定这是否是正确的方法，但我最终做的是这个

function myFunction(){
document.getElementById("fisk").innerHTML = "Hvem er du"
}

<button onclick="myFunction()">Click me</button>

现在我只需要找到一种方法来让它替换文本。一起替换div和其他标签。

Answer 3

我们走了，a small demo on jsFiddle（http://jsfiddle.net/json/8cu34y4L/）。

有三个带data-switch属性的按钮。该属性指示单击按钮时将显示page-2内的哪个块。

HTML

<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>

<div id="page-2">

    <div id="about_me" class="container">
         <h1>This is about me section</h1>

        <div>about me about me about me</div>
    </div>

    <!-- Hidden blocks that you show when the appropriate button is clicked. -->
    <div id="education" class="container" style="display: none;">
         <h1>This is about my education</h1>

        <div>education education education</div>
    </div>

    <div id="about_name_bravitus" class="container" style="display: none;">
         <h1>This is about the name bravitus</h1>

        <div>bravitus bravitus bravitus</div>
    </div>
</div>

JS（你需要jQuery）

// Listening to a button click.
$('[data-switch]').on('click', function (e) {
    var $page = $('#page-2'),
        blockToShow = e.currentTarget.getAttribute('data-switch');

    // Hide all children.
    $page.children().hide();

    // And show the requested component.
    $page.children(blockToShow).show();
});

Answer 4

只需添加此链接并执行以下代码：

script src =“ https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”

点击以了解有关我的信息点击显示我的学历单击以了解有关Bravitus的名称

<div id="about_me" class="container">
     <h1>This is about me section</h1>

    <div>about me about me about me</div>
</div>

<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
     <h1>This is about my education</h1>

    <div>education education education</div>
</div>

<div id="about_name_bravitus" class="container" style="display: none;">
     <h1>This is about the name bravitus</h1>

    <div>bravitus bravitus bravitus</div>
</div>

JS（您需要jQuery）

// Listening to a button click.
$('[data-switch]').on('click', function (e) 
{
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');

// Hide all children.
$page.children().hide();

// And show the requested component.
$page.children(blockToShow).show();
});

替换内容/部分按钮网页设计

4 个答案: