CODEWITHSUNDEEP
htmlcss
Zero0000-tech
Zero0000-tech

Reputation: 13

Why href cannot clickable when wrap inside div

Help! I try to create a mobile navigation bar at the bottom but for some reason my href link cannot be clicked. When I try to inspect the element with Google Chrome it kept select div instead of the href link

Interface Example

My code

$(document).ready(function() {
  $(".home1").click(function() {
    alert($(this).attr("navi"));
  });
});
.mobile_navigator {
  display: block;
  /*overflow: hidden;*/
  background-color: #0e8ce4;
  position: fixed;
  bottom: 0;
  height: 60px;
  width: 100%;
  z-index: 1;
  box-shadow: 0 -5px 15px 0 rgba(0, 0, 0, 0.2)!important;
}

.mobile_navigator div {
  width: 20%;
  float: left;
  padding: 8px 0 8px 0;
  pointer-events: none;
  cursor: default;
  z-index: 10;
  position: relative;
}

.mobile_navigator div i {
  text-align: center;
  display: block;
  font-size: 15px;
  padding: 13px 0 5px 0;
}

.mobile_navigator span {
  text-align: center;
  display: block;
  font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="mobile_navigator">
  <div navi="#">
    <i class="fa fa-user"></i>
    <span>MENU</span>
  </div>
  <div navi="#">
    <i class="fa fa-user"></i>
    <span>MENU</span>
  </div>
  <div href="index.jsp?navi=home" navi="#" class="nav_active home1">
    <i class="fa fa-home"></i>
    <span>HOME</span>
  </div>
  <div navi="#">
    <i class="fa fa-user"></i>
    <span>FEED</span>
  </div>
  <div navi="#">
    <i class="fa fa-user"></i>
    <span>PROFILE</span>
  </div>
</div>

When i try to alert when ever the link is clicked, javascript failed to execute because no link had been clicked

Upvotes: 0

Views: 91

Answers (3)

sks-15
sks-15

Reputation: 147

Use href in an anchor (<a></a>) tag as href is not a general atrribute. You can nest an <a href="LINK"></a> inside your <div> tag.

Though you can see this answer to make a link using the <div> tag using Javascript and jQuery.

Upvotes: 1

Ayyub Kolsawala
Ayyub Kolsawala

Reputation: 849

Just replace the div tags with an anchor tag and you should be fine. However to address your issue, the problem was having pointer-events: none; inside your div that's why your events generated by pointers were not getting triggered inside Javascript. 

$(document).ready(function() {
  $("#home1").click(function() {
    alert($(this).attr("navi"));
  });
});
.mobile_navigator {
  display: block;
  /*overflow: hidden;*/
  background-color: #0e8ce4;
  position: fixed;
  bottom: 0;
  height: 60px;
  width: 100%;
  z-index: 1;
  box-shadow: 0 -5px 15px 0 rgba(0, 0, 0, 0.2) !important;
}

.mobile_navigator a {
  width: 20%;
  float: left;
  padding: 8px 0 8px 0;
  cursor: default;
  z-index: 10;
  position: relative;
  text-decoration: none
}

.mobile_navigator a i {
  text-align: center;
  display: block;
  font-size: 15px;
  padding: 13px 0 5px 0;
}

.mobile_navigator span {
  text-align: center;
  display: block;
  font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="mobile_navigator">
  <a navi="#">
    <i class="fa fa-user"></i>
    <span>MENU</span>
  </a>
  <a navi="#">
    <i class="fa fa-user"></i>
    <span>MENU</span>
  </a>
  <a navi="YOUR CONTENT HERE" id="home1" href="index.jsp?navi=home">
    <i class="fa fa-home"></i>
    <span>HOME</span>
  </a>
  <a navi="#">
    <i class="fa fa-user"></i>
    <span>FEED</span>
  </a>
  <a navi="#">
    <i class="fa fa-user"></i>
    <span>PROFILE</span>
  </a>
</div>

Upvotes: 0

Quentin
Quentin

Reputation: 943217

Use a validator.

href is an attribute that appears on <a> elements.

You cannot apply it to arbitrary elements (e.g. your <div>) to turn them into links.

Use an <a> element (either instead of the <div> or around it).

Upvotes: 4

Related Questions