时间戳

首页 > 解决方案 > 将 Javascript 链接添加到整个 Flexbox 项

javascript - 将 Javascript 链接添加到整个 Flexbox 项

问题描述

我正在尝试使整个 flexbox 项目可点击，它指向一些 javascript。当我使用 javascript 来拉入 flexbox 容器下方的内容时，结构中有多个 ID 需要考虑。

目前，我只能使文本可点击而不是整个 .div ，如果我移动链接，它会破坏弹性框的缩放。

这里还有一些其他类似的问题，但是由于 javascript，所有答案似乎都不起作用。

我在这里添加了我正在使用的代码https://jsfiddle.net/xv3emywb/，并将其粘贴在下面。任何帮助将非常感激。

谢谢！

HTML结构：

<div class="offer-flex-container";>

<div id="solutions-anchor-div" class="offer-flex-item">
<a id="solutions-anchor" href="javascript:;">Solutions</a>
</div>

<div id = "services-anchor-div" class="offer-flex-item">
<a id="services-anchor" href="javascript:;">Services</a>
</div>

<div id="lifecycle-anchor-div" class="offer-flex-item">
<a id="lifecycle-anchor" href="javascript:;">Lifecycle</a>
</div>

</div>

CSS：

.offer-flex-container{
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}

.offer-flex-item{
background: #150f2a;
margin-right: 2px;
width: 500px;
height: 200px;
line-height: 100px;
color: white;
font-weight: 400;
font-size: 30px;
text-align: center;
padding-top: 60px;
}

选择链接后，我用来加载 .div 下方内容的 javascript。

$(document).ready(function(){

  $("#solutions-content").show();
  $("#services-content").hide();
  $("#lifecycle-content").hide();
  $("#solutions-anchor-div").css("background","#2fb4c8");

   $("#solutions-anchor").click(function(){
       $("#services-content").hide();
       $("#solutions-content").show();
       $("#lifecycle-content").hide();
       $("#solutions-anchor-div").css("background","#2fb4c8");
       $("#services-anchor-div").css("background","#150f2a");
       $("#lifecycle-anchor-div").css("background","#150f2a");

    });

  $("#services-anchor").click(function(){
        $("#services-content").show();
        $("#solutions-content").hide();
        $("#lifecycle-content").hide();
        $("#services-anchor-div").css("background","#2fb4c8");
        $("#solutions-anchor-div").css("background","#150f2a");
        $("#lifecycle-anchor-div").css("background","#150f2a");
   });

   $("#lifecycle-anchor").click(function(){
        $("#services-content").hide();
        $("#solutions-content").hide();
        $("#lifecycle-content").show();
        $("#services-anchor-div").css("background","#150f2a");
        $("#solutions-anchor-div").css("background","#150f2a");
        $("#lifecycle-anchor-div").css("background","#2fb4c8");
   });
 });

标签： javascripthtmlcssflexboxhref

解决方案

.offer-flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.offer-flex-item {
  background: #150f2a;
  margin-right: 2px;
  width: 500px;
  height: 200px;
  line-height: 100px;
  color: white;
  font-weight: 400;
  font-size: 30px;
  text-align: center;
  padding-top: 60px;
}


.full-width-link a{
  display: block;
  height: 100%;
}

a:hover{
  background-color: white;
}
<div class="offer-flex-container">

  <div id="solutions-anchor-div" class="offer-flex-item">
    <a id="solutions-anchor" href="javascript:;">Solutions</a>
  </div>

  <div id="services-anchor-div" class="full-width-link offer-flex-item">
    <a id="services-anchor" href="javascript:;">Services</a>
  </div>

  <div id="lifecycle-anchor-div" class="offer-flex-item">
    <a id="lifecycle-anchor" href="javascript:;">Lifecycle</a>
  </div>

</div>

我添加了一个 onhover 类，因此您可以在此示例中看到链接的表面是什么。我还制作了第二个元素全尺寸。但是，父元素的填充仍然存在。

推荐阅读