将 Javascript Link 添加到整个 Flexbox 项目

Question

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

目前我只能使文本可点击而不是整个 .div 如果我移动 link 它会破坏 flexbox 的缩放。

这里还有其他一些类似的问题，但由于 javascript none 的答案似乎有效。

我在此处添加了我正在使用的代码 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;
}

以及 javascript，我在选择 link 后用于加载 .div 下方的内容。

$(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");
   });
 });

Answer 1

感谢@CBroe 的输入。

简单的解决方法是从 div 容器中删除所有填充并向 link 添加一些样式。

.offer-flex-item a{
display:block; 
height: 100%
}

Answer 2

这是因为锚标记是内联的。因此，在 css 文件中添加以下 css 代码，并从“.offer-flex-item”class 中删除填充，它将按预期工作。

.offer-flex-item a{
   display:block; 
}

Answer 3

.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>

我添加了悬停 class 以便您可以在此示例中看到 link 的表面是什么。我还制作了第二个元素的全尺寸。但是，父元素的填充仍然存在。

将 Javascript Link 添加到整个 Flexbox 项目

Add a Javascript Link to an Entire Flexbox Item

html

javascript

css

href

flexbox