时间戳

首页 > 解决方案 > 如何将按钮与特定帖子或页面链接？

html - 如何将按钮与特定帖子或页面链接？

问题描述

正如我在标题中所说，我试图将我在代码中制作的按钮链接到我试图插入页面的帖子和文件。

举个例子：我制作了一个带有 3 个按钮的页面，这些按钮应该作为单独的页面，但我不知道如何制作它们，我该怎么说，相互排斥。到目前为止，这是我的代码：

<!DOCTYPE html>
<html>
<head>

</head>

<title>Skandaloza</title>
<style type="text/css">

body{margin:0 auto; width:980px; position:relative;} 
div.navMENU{ width:100%; height:50px;}
div.navMENU ul{list-style-type:none; padding:0px; margin:0 auto;}
div.navMENU li{float:left; padding:60px; margin:7px;}
div.navMENU a{display:block; width:180px; border-radius:10px: -moz-border-radius:10px; -webkit- 
border:10px;}
a:link{font-weight:bold; background-color:#ff0000; text-align:center; text-decoration:none;
padding:5px;}
a:hover{background-color:#0000ff;}
a:active{background-color:#0000ff;}
</style>

<body>

<div class="navMENU">
<h1 style="text-align:center"><font size="10" face="Cooper"> SKANDALOZA </font></h1>
<ul>

<li><a href="pagename#test" style="color: white"> POCETNA </a> </li>
<li><a href="#" style="color: white"> POSTOVI </a> </li>
<li><a href="#" style="color: white"> KONTAKT </a> </li>


</ul>

<video src="Gotovo.mp4" poster="initial_static_picture.jpg" width="1000" controls>
</video>

<hl style="text-align:left-side"><font size="10" face="Arial">GOTOVO JE - Jelena ubijena u KUCI 
Zoranovog rodjaka!</font></hl>

<body/>

<html/>

因此，任何比我更有经验的人（我现在在高中四年级，我来自欧洲）可以提出一些可以让它按照我的意图工作的东西。

例如，我想连接我插入的这个视频，只在提到的页面上显示（POSTOVI），而不是在其他两个页面上显示其他两个按钮。

如果您需要更多解释或更好的解释，我很乐意接受并做得更好，因为这是我第一次来这里，我想知道我应该做什么和不应该做什么！

非常感谢好心的陌生人！

标签： htmlcss

解决方案

所以，我将尝试通过几个步骤来完成：

  1. 创建“基础”页面

    我将创建一个包含导航菜单、页脚和页面内容容器的基本页面。我还将为导航菜单（active可能）添加一些类，以便轻松切换导航菜单的当前页面。

  2. 创建视图

    在页面内容中，我将创建容器，每个容器都有一个 ID。为它们设置样式，使它们看起来不错，然后container隐藏默认类。添加另一个特殊类，active以便在需要时显示容器。

  3. 添加功能以在哈希更改时切换活动容器

    在函数中，active从菜单项和容器中删除所有类。然后，基于当前哈希，将该active类添加回所需的容器。将此函数添加到窗口hashchange事件并在页面加载时调用该事件以确保主页默认启动。

瞧，你已经有了一个基本的原型！这是上面的一个片段。

请注意，有些框架可以更好地完成所有这些工作（我喜欢使用 ( backbone )，但我的目标是创建一个非常基本的页面，该页面根据当前 url 显示不同的内容。

function changeHash() {
  // Hide all containers and pause videos
  $("#nav a.item").removeClass("active");
  $(".container").removeClass("active");
  $("video")[0].pause();
  // Based on the hash, add a 
  //  "visible" class to the correct container
  switch (location.hash) {
    case "#video":
      $(`#nav a.item[href="#video"]`).addClass("active");
      $("#video").addClass("active");
      break;
    case "#about":
      $(`#nav a.item[href="#about"]`).addClass("active");
      $("#about").addClass("active");
      break;
    default:
      $(`#nav a.item[href="#"]`).addClass("active");
      $("#home").addClass("active");
  }
}

// Listen for hash changes and call on initial load
window.addEventListener('hashchange', changeHash);
changeHash();
body {
  margin: 0;
}

#nav {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  background-color: #007fff;
  padding: 0;
  margin: 0;
}

#nav .item {
  padding: 1em;
  text-decoration: none;
  color: white;
}

#nav .item:hover {
  border-bottom: 2px solid #007fff;
  margin-bottom: -2px;
}

#nav .item.active {
  background-color: #0059b3;
}

.container {
  display: none;
  text-align: center;
}

.container.active {
  display: unset;
}

#home img {
  display: block;
  margin: 0 auto;
  padding: 1em;
}

#video video {
  width: 80%;
  display: block;
  margin: 0 auto;
}

#about p {
  display: block;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="nav">
  <a class="item" href="#">Home</a>
  <a class="item" href="#video">Video</a>
  <a class="item" href="#about">About</a>
</ul>

<div id="page_content">
  <div id="home" class="container">
    <h3>
      Welcome to the home page!
    </h3>
    <img src="https://picsum.photos/300/100">
  </div>
  <div id="video" class="container">
    <h3>
      Big Buck Bunny
    </h3>
    <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls></video>
  </div>
  <div id="about" class="container">
    <p>
      This is a very simple single-page javascript application. There are frameworks that do it better, but this one works for now.
    </p>
  </div>
</div>

推荐阅读