Why href cannot clickable when wrap inside div

Question

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

why does a div have an href? You should be using anchors, not divs. — epascarello, Dec 02 '19 at 14:04
I think the JSX needs a parent element. Additionally would you not want to surround your href with a div and not make your div into one. — Deeroy, Dec 02 '19 at 14:04
Maybe you're looking for `` with `href` attribute, not `
` with `navi` attribute. — Beeno Tung, Dec 02 '19 at 14:05

score 4 · Answer 1 · answered Dec 02 '19 at 14:05

4

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

answered Dec 02 '19 at 14:05

Quentin

914,110
126
1,211
1,335

score 1 · Answer 2 · answered Dec 02 '19 at 14:48

1

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.

answered Dec 02 '19 at 14:48

sks-15

147
11

score 0 · Accepted Answer · answered Dec 02 '19 at 14:39

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>

Thanks.. Finally it work like a charm. Now I can continue – Zero0000-tech Dec 03 '19 at 14:03 — Zero0000-tech, Dec 03 '19 at 14:03

Why href cannot clickable when wrap inside div

3 Answers3