Question

我试图让整个flexbox项目可点击，这指向一些javascript。由于我使用javascript来引入flexbox容器下面的内容，因此结构中有多个ID需要考虑。

目前我只能使文字可点击而不是整个.div，如果我移动链接，它会使Flexbox从缩放中断开。

这里还有其他一些类似的问题，但由于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");
   });
 });

Answer 1

感谢@CBroe的输入。

简单的解决方法是从div容器中删除任何填充，并为链接添加一些样式。

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

Answer 2

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

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

将Javascript链接添加到整个Flexbox项目

3 个答案: