HTML-тег привязки не перенаправляет - PullRequest
Новая
       3

HTML-тег привязки не перенаправляет

0 голосов
/ 24 сентября 2018

У меня проблемы с использованием тега привязки (в данном случае). 

 for($i=0;$i<$numrows;$i++)
echo "
<div class='singleItem'> 
  <img src= $arr3[$i] class='itemImage'> 
  <div class='itemName'> $arr1[$i] </div> 
  <div class='itemPrice'><br> Php$arr2[$i] 
      <div class='orderButtonDiv'>
          <a href='menu_burger.php?itemid=$arr4[$i]'>ORDER</a>
      </div> 
  </div>
</div> "
Как вы можете заметить, я создаю несколько экземпляров singleItem , и по окончании кажется, что я не могу щелкнуть тег привязки.Как будто может быть что-то отстает.Я знаю, что ссылка работает, так как при проверке элементов в Chrome отображаются правильные ссылки.

вот css 

.itemImage{
  width :80%;
  height: 80%;
  object-fit: contain;
  object-position: left;
  padding-top:4%;
  padding-left: 2%;
  float:left;
  position:absolute;
  left: 0;
}

.itemName{
  color: red;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ",sans-serif;
  font-size: 150%;
  font-weight: bold;
  margin-left: 40%;
  margin-top: 4%;
  z-index -1;
}

.itemPrice{
  color: black;
  text-decoration: none;
  font-family: "Akzidenz-Grotesk BQ",sans-serif;
  font-size: 110%;
  margin-left: 41%;
  margin-top: 15%;
  position: absolute;
  bottom: 25%;
  z-index -1;
}

.singleItem{
  width: 48%;
  background-color: #e0dede;
  border:1px solid red;
  height: 150px;
  position: relative;
  z-index: -1;
}

.rowItem{
  display: flex;
  justify-content: space-between;
  padding-bottom: 2%;
  height: 150px;
  margin-top: 1%;
}

.listItems{
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  /* margin-top: 130px ; */
}

.orderButtonDiv{
  display: inline;
  border: 2px solid red;
  position: relative;
  right: -50%;
  margin-top: 15%;
  z-index 3;
}

.orderButtonDiv a {
  text-decoration: none;
  color: red;
  width: 100%;
  height: 100%;
  font-family: "Akzidenz-Grotesk BQ",sans-serif;
  font-size: 90%;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;

}

Я попробовал почти все, сделав весь класс singleItem, orderButtonDiv интерактивным, используя Jquery, и все же безуспешно.

, если кто-то может предложить какую-то помощьбыло бы здорово, и ценится Спасибо

Ответы [ 4 ]

0 голосов
/ 24 сентября 2018

Ошибка записи z-index, пожалуйста, проверьте, должно ли это быть z-index:1, вы пропустили (:) и вместо того, чтобы дать z-index:-1;, установите z-index:1; и проверьте.

0 голосов
/ 24 сентября 2018

Я полагаю, что это как-то связано с z-index: -1; на div с классом singleItem - когда этот флажок снят, тег привязки кликабелен - надеюсь, это поможет

0 голосов
/ 24 сентября 2018 
   <a href='menu_burger.php?itemid=$arr4[$i]'>ORDER</a>

просьба изменить на 

      <a href="menu_burger.php?itemid=<?php echo $arr4['$i']?>"> ORDER </a>

надеюсь, что это будет исправить, если не извините, попробуйте

0 голосов
/ 24 сентября 2018

Чтобы перенаправить на якорь, этот якорь должен иметь id и ваш URL #yourid

<a href="#myId">Link to My ID</a>

эта ссылка перенаправляет на этот div: 

<div id="myId">My ID</div>
...