Question

我正在制作一个网站中的几个部分，并且我还有其他HTML，一旦按下按钮，我想将其替换为初始内容。

之前，我已经在教程中使用jQuery和innerHTML / insertAdjacentHTML进行了此类操作，但是我不太了解如何将其实现到自己的代码中。我知道它是如何工作的，但是JS不是我的强项，我想通过解决这些问题来进一步了解它。

<section class="section-web new-section__white section new_section" id="web">

        <div class="row web-btns">
            <div class="col span-2-of-2 ">

                <a class="btn btn-ghost" href="#" target="_blank">Button 1</a>

                <a class="btn btn-ghost" href="#" target="_blank">Button 2</a>

                <a class="btn btn-ghost" href="#" target="_blank">Button 3</a>

                <a class="btn btn-ghost" href="#" target="_blank">Button 4</a>
            </div>
        </div>

 <!-- section (initial) button 1 -->
        <div class="row" id="button-1">
            <div class="col span-1-of-2">
                <h2>Text Button-1</h2>
                <p>Some Text</p>

        </div>

  <!-- section button 2 -->

  <!--
        <div class="row" id="button-2">
            <div class="col span-2-of-3">
               <h2>text Button-2</h2>
                <p>text</p>


            </div>
        </div>
-->

 <!-- section button 3 -->

        <!--
        <div class="row" id="button-3">
            <div class="col span-2-of-2">
                <h2>text Button-3</h2>
                <p>text</p>
            </div>
            </div
-->

 <!-- section button 4 -->

 <!--
    <div class="row" id="button-4">
            <div class="col span-2-of-2">
                <h2>text Button-4</h2>
                <p>text</p>
            </div>

        </div>
-->

    </section>

CSS：

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    color: #555;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    margin: 15px;
    letter-spacing: 1px;
  text-align: center;
}

p {
    font-weight: 300;
    font-size: 15px;
    text-align: center;
    line-height: 1.5;
}

a {
    font-size: 15px;
    text-transform: uppercase;
}

.new-section__white {
      padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    background-color: #fff;
    height: 100vh;
    width: 100vw;
}

.btn:link,
.btn:visited {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 200px;
    -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
    -moz-transition: background-color 0.2s, border 0.2s, color 0.2s;
    -o-transition: background-color 0.2s, border 0.2s, color 0.2s;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #000;
    color: #000;
}

.btn-ghost:hover,
.btn-ghost:active {
    box-shadow: 2px 2px 10px #555;
    border: none;
    background-color: #000;
    color: #fff;
}

这是一个非常基本的CodePen。我已经将有关如何实现此目标的想法包含在JS领域中。

https://codepen.io/caitlinmooneyx/pen/XQpMNe

我知道我可以使用一个常量使用innerHTML甚至insertAdjacentHTML，但是同样，不确定如何查看另一个项目中的现有代码，如何将其实现为我编写的内容。通常，我无法理解如何调用该函数（请用我的术语）。

实现此目标的最佳方法是什么？

Answer 1

如果它是与用户交互的按钮，则应使用按钮标签而不是锚标签。这是一个基于您的示例的代码：

// button with onclick handler that calls a changeView function.

<div class="row web-btns">
  <div class="col span-2-of-2 ">
    <button onclick="changeView()" type="button" class="btn btn-ghost" href="#" target="_blank">Button 1</button>
  </div>
</div>

// identifier for paragraph tag

<div class="row" id="button-1">
  <div class="col span-1-of-2">
    <h2>Text Button-1</h2>
    <p id="some-text">Some Text</p>
  </div>
</div>

// changeView function implementation

const changeView = (view) => {
  const markup = 'asd';
  const p = document.getElementById('some-text');
  p.innerHTML = markup;
};

现在标记变量被硬编码为“ asd”，但是您可以轻松地为不同的按钮使用不同的“ view”调用changeView函数。

Answer 2

您可以通过几种方法来实现，但是最简单的方法就是使用innerHTML并关闭内容。

下面的代码不是执行此操作的最简单方法，但这确实意味着您可以根据想要切换内容的方式来分解内容。

const markups = {
  intro: `<h1>This is the intro</h1>`,
  summary: `<p>This is the summary</p>`,
};

const getMarkupSwitcher = markupData =>
  element =>
    markupToUse =>
      element.innerHTML = markupData[markupToUse]

      
const markupSwitcher = getMarkupSwitcher(markups)
const switchMainDiv = markupSwitcher(document.getElementById('main'))

switchMainDiv('intro')

<button onclick="switchMainDiv('intro')">Intro</button>
<button onclick="switchMainDiv('summary')">Summary</button>

<div id="main"></div>

Answer 3

您可以简单地做到：

$( document ).ready(function() {
  $('.btn').on('click', (event) => {
    $('.content-section').hide();
    let section = $(event.target).data('section');
    $(`.section-${section}`).show();
  })
});

由于您似乎正在使用jQuery，因此我在HTML元素（例如data-section='2'）中添加了一些属性，以将内容链接到每个按钮，因此您还可以使用Bootstrap之类的库来生成此类菜单你。

这里有一个简单的解决方法：JSFiddle

使用innerHTML / insertAdjacentHTML和JS替换Div内容？

3 个答案: