html - 如何向导航栏的每个 "section"添加文本？对于首页 x 文本显示，对于历史 : y text shows?

Question

所以我正在做一个元素，我应该创建一个网站并讨论互联网历史及其对社会的影响。无论如何，我的计划或想法是在网页上制作 3 个单独的部分。 “主页”是网站的主页，只显示图像/背景和“你好我的任务”，然后“历史”选项卡有一些关于互联网历史等的文字，然后是第三个带有文字的选项卡对社会的影响关于它实际上如何影响社会。

无论如何。如果你有任何背景，按照我在这里做，你可以看到我在网站的右侧有三个当前选项卡。我不知道如何为每个单独添加文本，当您单击下一个时，X 文本消失，Y 文本出现在该名称旁边。我该怎么做？

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: normal;
  /* standard font "vikt" bold/italic etc eller nummer som 400*/
}

.background {
  width: 100%;
  height: 100%;
  background-image: url(../css/qwx.jpg);
  background-repeat: no-repeat;
  /* spelar bara bakgrunden en gång och inte repeterad igen */
  background-size: cover;
  /* "cover" för att täcka hela "elementet" alltså bakgrunden */
  position: relative;
  /* position relativ gör så att den positioneras relativ till sin "originella" position. */
}

.rad {
  width: 150px;
  height: auto;
  /* istället för "100% elr 80%" eller liknande så är den automatisk för att vara mer "flexibel" */
  position: absolute;
  /*används för att positionera "relativt" med sin närmaste positionerade "parent" */
  left: 0%;
  /* 0% för vill ha den i vänstra hörnet */
  top: 30%;
  /* vill ha i mitten ish o för mig såg det bra ut iaf (vet inte om detta ändras beroende på upplösning eller liknande, har ej provat */
}

.rad a {
  text-decoration: none;
  font-size: 20px;
  font-family: "Tahoma", "Comic Sans MS";
  /* två "fonts" ifall den första inte finns/laddas in */
  font-weight: 600;
  /* tjockleck */
  height: 80px;
  margin: 3px 0;
  float: left;
  display: inline-block;
  background-color: black;
  color: white;
  line-height: 80px;
  text-align: center;
  /* center för att stoppa texten i mitten av rutan */
  /*-- inlineblock används för att få bredden & höjden att respekteras, samt padding/margin */
  transition: 400ms;
  /* lite längre tid för att knapparna ska registreras som att dom är pekade på, blir en fin liten effekt */
}

a.active,
.rad a:hover {
  background-color: white;
  color: black;
  width: 100%;
  /* vill ha det så att när man häver över muspekarn så blir rad a 100% bredd, medans när rad a, b, c, är inaktiva och inte har muspekaren över är mindre */
}

.a {
  width: 90%;
}

.b {
  width: 80%;
}

.c {
  width: 80%;
}

<div class="background">
  <div class="rad">
    <a class="a active" href="#">Startsida</a>
    <a class="b" href="#">Historia</a>
    <a class="c" href="#">Påverkan</a>
  </div>
</div>

Answer 1

以下内容利用 Bootstrap 和 JQuery 来创建您所描述内容的非常简单的版本，但我猜可能不是您所需要的。

然而，它是一个很好的例子，说明互联网编程从一开始就已经走了多远。

一些 html 标记和一些用户提供的内容，这里是一个简单的“3 页”网站

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-3">
      <div class="nav flex-column nav-pills" id="v-pills-tab">
        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-Startsida">Startsida</a>
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-Historia">Historia</a>
        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-Påverkan">Påverkan</a>
      </div>
    </div>
    <div class="col-6">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-Startsida">
          <div class="float-left mt-1 ml-1 mr-3 mb-3">
            <img src="https://picsum.photos/100" />
          </div>
          <span>Startsida</span>
        </div>

        <div class="tab-pane fade" id="v-pills-Historia">Historia</div>
        <div class="tab-pane fade" id="v-pills-Påverkan">Påverkan</div>
      </div>
    </div>
  </div>
</div>