CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
jsPlayer
jsPlayer

Reputation: 1245

anchor tag not working inside a div

I am creating a navbar and following bootstrap styling. My anchor tag is not working on the drop-down nav menus. I tried many examples of similar problems people were having. like z-index, block element, floating. None of those seems to work in my case. Not sure whats going on.Below is the partial code i am working with. I have a jquery function that I use to detect the mouse hover so I can drop the menu and other things. there i do have event prevent default. But removing that doesnt seem to do anything either 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function () {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

$(document).ready(function () {
  $(' .dropdown-content a').click(function (e) {
    e.preventDefault();
    $(' .dropdown-content a').removeClass('active1');
    $(this).closest(' .dropdown li').find("a:eq(0)").addClass('active1');
    $(this).closest(' .top-nav li').find("a:eq(0)").addClass('dropbtn');
    $(this).addClass('active1');
  });

  

});
.navbar-inverse{background-color:#004f8e!important; border-color: #004f8e!important; border-radius:0px!important; border-top: 6px solid #57be17!important;}
.top-nav li a{color:white!important;}
.top-nav li a i{    font-size: 9px; vertical-align: middle;margin-top: -3px; margin-right: 12px;}
.dropbtn {color: white; padding: 16px; font-size: 16px;border: none;cursor: pointer;}
.dropdown { position: relative; display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9;min-width: 190px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5;}
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block; z-index: 15;}
.dropdown:hover .dropdown-content { display: block;}
.dropdown:hover .dropbtn { text-decoration:none; background-color:#57be17;}
.active1{background:#57be17;}
a{ text-decoration:none!important;}
		<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav top-nav pull-right">
					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</a></li>
						<div class="dropdown-content">
							<a href="https://www.yahoo.com/">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>

					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>

					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>

					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>


					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>
				</ul>
			</div>

Upvotes: 0

Views: 1383

Answers (3)

user5739931
user5739931

Reputation:

it may be because jQuery is being sourced after the DOM is ready. Try wrapping your jQuery code in a setTimeout(function () { }, 3000) to get it to wait 3 seconds and see if jQuery becomes visible, if not visible at DOM ready.

Upvotes: 0

zfrisch
zfrisch

Reputation: 8660

You need to include JQuery. I adjusted the following snippet so you could see the outline of the a tag to hover over.

If you're working on a JQuery project and you see the phrase $ is undefined it means that the JQuery library either hasn't been included, has been overwritten, or somewhere in the code you've used JQuery.noConflict() - which allows you to use JQuery objects by using JQuery instead of $. More often than not it's because it wasn't included. 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function () {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

$(document).ready(function () {
  $(' .dropdown-content a').click(function (e) {
    e.preventDefault();
    $(' .dropdown-content a').removeClass('active1');
    $(this).closest(' .dropdown li').find("a:eq(0)").addClass('active1');
    $(this).closest(' .top-nav li').find("a:eq(0)").addClass('dropbtn');
    $(this).addClass('active1');
  });

  

});
.navbar-inverse{background-color:#004f8e!important; border-color: #004f8e!important; border-radius:0px!important; border-top: 6px solid #57be17!important;}
.top-nav li a{color:white!important;}
.top-nav li a i{    font-size: 9px; vertical-align: middle;margin-top: -3px; margin-right: 12px;}
.dropbtn {color: white; padding: 16px; font-size: 16px;border: none;cursor: pointer;}
.dropdown { position: relative; display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9;min-width: 190px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5;}
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block; z-index: 15;}
.dropdown:hover .dropdown-content { display: block;}
.dropdown:hover .dropbtn { text-decoration:none; background-color:#57be17;}
.active1{background:#57be17;}
a{ text-decoration:none!important; border: 1px black solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav top-nav pull-right">
					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</a></li>
						<div class="dropdown-content">
							<a href="https://www.yahoo.com/">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>

					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>

					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>

					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>


					<div class="dropdown">
						<li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</a></li>
						<div class="dropdown-content">
							<a href="#">Action</a>
							<a href="#">Another action</a>
							<a href="#">Something else here</a>
							<a href="#">Separated link</a>
							<a href="#">One more separated link</a>
						</div>
					</div>
				</ul>
			</div>

Upvotes: 0

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

Remove e.preventDefault(); from the anchor click call. It stops the default action of an element from happening. In case of link, it stops the link from opening the URL. Moreover, most of your links do not have a href specified. Where will the anchor tag navigate to?

Upvotes: 1

Related Questions