Добавить ссылку Javascript на весь элемент Flexbox - PullRequest
Новая
       6

Добавить ссылку Javascript на весь элемент Flexbox

0 голосов
/ 06 июня 2018

Я пытаюсь сделать весь элемент flexbox кликабельным, что указывает на какой-то JavaScript.Поскольку я использую JavaScript для извлечения содержимого ниже контейнера flexbox, в структуре необходимо учитывать несколько идентификаторов.

На данный момент я могу сделать текст кликабельным, а не весь .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;
}

И javascript, который я использую для загрузки контента ниже .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");
   });
 });

Ответы [ 3 ]

0 голосов
/ 06 июня 2018

Это потому, что тег привязки встроен.Поэтому добавьте ниже код CSS в файл CSS и удалите отступы из класса ".offer-flex-item", и он будет работать как положено. 

.offer-flex-item a{
   display:block; 
}
0 голосов
/ 06 июня 2018 

.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, чтобы вы могли видеть в этом примере, какова поверхность вашей ссылки.Я также сделал второй элемент в натуральную величину.Однако все еще будет присутствовать заполнение родительского элемента.

0 голосов
/ 06 июня 2018

Спасибо @CBroe за ввод.

Простым исправлением было удаление любых отступов из контейнеров div и добавление некоторого стиля в ссылку. 

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