文章/答案/技术大牛

发布

问使JS项链接到其他页面
EN

Stack Overflow用户

提问于 2022-05-04 17:02:04

回答 1查看 58关注 0票数 0

因此，我使用一些来自CodePen的代码来制作我的nagivation按钮和我的光标。然而，所有的按钮创建似乎都发生在JavaScript文件中。我想添加到每个按钮的链接，以重定向到单独的HTML页面。我希望在JS文件中找到一种方法来实现它，但是欢迎所有的解决方案！

此外，我知道这可能是一个非常愚蠢的问题，但我仍然是新的网页开发，所以请与我！我将发布HTML和JS文件的片段。我不能包含CSS片段，因为文件太大了。

该网站是ryanhursh.xyz，以供参考，它是如何建立。

const app = Vue.createApp({
    data() {
      return {
        items: [{ page: "about" }, { page: "works" }, { page: "contact" }],
        cursorPosX: 960,
        cursorPosY: 540,
        cursorFollowActiveBuffer: 16,
        buttonHoverFlag: false
      };
    },
    mounted() {
      this.cursorPointer = this.$refs.cursorPointer;
      this.cursorFollow = this.$refs.cursorFollow;
      this.button = document.querySelectorAll(".js-button");
  
      window.addEventListener("mousemove", (e) => {
        if (this.buttonHoverFlag === true) {
          return;
        }
        this.mouseMoveCursor(this.cursorPointer, e, 1.0);
        this.mouseMoveCursor(this.cursorFollow, e, 1.0);
      });
  
      this.onMouseMove();
      this.onMouseLeave();
    },
    methods: {
      mouseMoveCursor(element, event, friction) {
        this.cursorPosX += (event.clientX - this.cursorPosX) * friction;
        this.cursorPosY += (event.clientY - this.cursorPosY) * friction;
        element.style.transform = `translate(${
          this.cursorPosX - element.clientWidth / 2
        }px,${this.cursorPosY - element.clientHeight / 2}px)`;
      },
      onMouseMove() {
        for (let i = 0; i < this.button.length; i++) {
          this.button[i].addEventListener("mousemove", (e) => {
            this.buttonHoverFlag = true;
            this.cursorPointer.style.backgroundColor = "transparent";
            this.cursorFollow.style.transform = `translate(${
              e.target.getBoundingClientRect().left -
              this.cursorFollowActiveBuffer
            }px,${
              e.target.getBoundingClientRect().top - this.cursorFollowActiveBuffer
            }px)`;
            this.cursorFollow.style.width =
              e.target.getBoundingClientRect().width + "px";
            this.cursorFollow.style.height =
              e.target.getBoundingClientRect().height + "px";
            this.cursorFollow.style.padding =
              this.cursorFollowActiveBuffer + "px";
            this.cursorFollow.style.borderRadius = 0;
          });
        }
      },
      onMouseLeave() {
        for (let i = 0; i < this.button.length; i++) {
          this.button[i].addEventListener("mouseleave", () => {
            this.buttonHoverFlag = false;
            this.cursorPointer.style.backgroundColor = "#fff";
            this.cursorFollow.style.width = 10 + "px";
            this.cursorFollow.style.height = 10 + "px";
            this.cursorFollow.style.padding = 32 + "px";
            this.cursorFollow.style.borderRadius = "100%";
          });
        }
      }
    }
  });
  
  app.mount("#app");

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Ryan R. Hursh</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="app">
    <header class="header">
      <nav class="header__nav">
        <ul class="header__list">
          <li v-for="item in items" class="header__item"><a class="button js-button">{{ item.page }}</a></li>
        </ul>
      </nav>
    </header>
<div class="cursor">
  <div class="cursor__pointer" ref="cursorPointer"></div>
  <div class="cursor__follow" ref="cursorFollow"></div>
</div>
</div>

</head>

<!-- content-->

<body>


<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>


 <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  <!-- 
  <div id='stars'></div>
  <div id='stars2'></div>
  <div id='stars3'></div>
 -->
  <div id='title'>
    <span>
      Ryan R. Hursh
    </span>
    <br>
    <span>
      HTML, CSS, JavaScript
    </span>
  </div>

<!-- end content-->
<!-- embedded scripts -->

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://unpkg.com/vue@next'></script>
  <script  src="./script.js"></script>
</script>

<!-- end scripts -->
</body>
</html>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-05 00:59:34

对于带您进入其他HTML页面的按钮，只需：

Html：

<button id="whateveruwant" onclick="whateverfunctionuwant()">text here</button>

联合材料也很简单：

function whateverfunctionuwant() {
 location.href = "whateverhtmlpageuwant.html"
}

因此，该按钮将指向另一个HTML页面。如果位置不工作，请尝试Window.href。如果您想更改它的外观和位置，则Id是用于CSS的。如果你仍然不明白，那就去W3学校，然后搜索如何将按钮更改为另一个HTML页面。(顺便说一句，只要把我留下的东西换成你想要的任何功能就行了)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72116821

复制

相似问题

问使JS项链接到其他页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使JS项链接到其他页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使JS项链接到其他页面
EN