文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在html/css中切换按钮链接

问在html/css中切换按钮链接
EN

Stack Overflow用户
提问于 2021-02-27 03:30:41
回答 2查看 74关注 0票数 2

我有以下代码：

​

代码语言：javascript
复制
    document.addEventListener("DOMContentLoaded", function(event) { 

(function() {
  requestAnimationFrame(function() {
    var banner;
    banner = document.querySelector('.exponea-banner3');
    banner.classList.add('exponea-in3');
    return banner.querySelector('.exponea-close3').addEventListener('click', function() {
      return banner.classList.remove('exponea-in3');
    });
  });

}).call(this);
});
代码语言：javascript
复制
*, *:after, *:before {
  box-sizing: border-box;
}

/*=====================*/
.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox label {
  width: 90px;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  border-radius: 100%;
  left: 0;
  top: -5px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 42px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
}
.model-7 .checkbox input:checked + label {
  border-color: #04c6db;
}
.model-7 .checkbox input:checked + label:after {
  background: #04c6db;
  left: 50px;
}


/*banner*/
/* Banner*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html3,
body3 {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.exponea-banner3 {
 
  font-family: Roboto, sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2e364d;
  color: #ebeef7;
  padding: 30px 80px 30px 35px;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
  display: none;
}
.exponea-banner3.exponea-in3 {
  opacity: 1;
  transition-duration: 0.4s;
}
.exponea-banner3 .exponea-close3 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}
.exponea-banner3 .exponea-label3 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner3 .exponea-text3 {
  margin-bottom: 8px;
}
.exponea-banner3 .exponea-count3 {
  font-weight: 500;
  display: flex;
  align-items: center;
}
.exponea-banner3 .exponea-label3 {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner3,
.exponea-close3,
.exponea-text3,
.exponea-label3,
.exponea-label3 {
    z-index: 10;
}
.open3 {
  display: block;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="banner.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

<!-- First -->
    <div class="exponea-banner3 open3">
        <div class="exponea-close3">
            &times;
        </div>
        <div class="exponea-text3">
            Hi There! Thanks For Stumbling Upon My Website!
        </div>
<div class="exponea-count3">

Want To Switch Website View?
<div class="model-7">
  <div class="checkbox">
    <input type="checkbox"/>
    <label></label>
  </div>
</div>

  </div>
        <div class="exponea-label3">
            - Hussain Omer
        </div>
    </div>





<script src="script.js"></script>
  </body>
</html>

​

我想添加一个指向切换按钮的链接。例如，当用户单击该按钮时，应将其定向到此链接：https://noxiousdigitalclass.hussainomer.repl.co/

这只是一个例子，但是由于CSS控制切换按钮的动画效果，我该如何设置它们呢？

预期输出

当用户单击切换按钮时，它会将用户定向到此链接：https://noxiousdigitalclass.hussainomer.repl.co/

javascript
html
jquery
css
animation
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-27 04:20:16

如果我正确理解了您的问题，当用户选中复选框时，您希望将用户重定向到某个站点。你对css的看法是对的，你将不能使用css来重定向。一种简单的方法是使用on click事件。只需将您的复选框替换为以下内容：

代码语言：javascript
复制
<input onclick="setTimeout(function(){location.href='https://noxiousdigitalclass.hussainomer.repl.co';}, 1000);" type="checkbox"/>

我将解释代码，当您检查输入时，它将等待1秒，让动画播放。然后在第二个结束后，它将转到您想要转到的链接。

如果这个不起作用，请告诉我。

完整代码：

代码语言：javascript
复制
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="banner.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

<!-- First -->
    <div class="exponea-banner3 open3">
        <div class="exponea-close3">
            &times;
        </div>
        <div class="exponea-text3">
            Hi There! Thanks For Stumbling Upon My Website!
        </div>
<div class="exponea-count3">

Want To Switch Website View?
<div class="model-7">
  <div class="checkbox">
    <input onclick="setTimeout(function(){location.href='https://noxiousdigitalclass.hussainomer.repl.co';}, 1000);" type="checkbox"/>
    <label></label>
  </div>
</div>

  </div>
        <div class="exponea-label3">
            - Hussain Omer
        </div>
    </div>





<script src="script.js"></script>
  </body>
</html>
票数 1
EN

Stack Overflow用户

发布于 2021-02-27 04:16:49

要做到这一点，最好的方法是在按钮标记内添加带有该标记的标记，并在标记之间放置显示<button><a href="https://noxiousdigitalclass.hussainomer.repl.co/>BUTTON</a></button>的单词

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

https://stackoverflow.com/questions/66391769

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档