链接在Html中不起作用？

Question

Would someone help me, none of my html links are working and I don't know why? Well the links in the side menu are, but the links on the main page and the logo link don't? I'v added the css to the html because I don't know if it is the html or css causing the problem?

Here's the code:

  $(window).load(function() { $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); $(".swipe-area").swipe({ swipeStatus: function(event, phase, direction, distance, duration, fingers) { if (phase == "move" && direction == "left") { $(".container").addClass("open-sidebar"); return false; } if (phase == "move" && direction == "right") { $(".container").removeClass("open-sidebar"); return false; } } }); }); 

 #headerMenu { width: 100%; height: 65px; background-color: #212021; padding: 0px; margin: 0px; position: fixed; z-index: 1; } #logo a { color: #FFFFFF; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 25px; background-color: #212021; z-index: 1; position: fixed; top: 14px; left: 10px; } #page-content { position: absolute; top: 100px; z-index: 0; padding-left: 20%; padding-right: 20%; } #headerMenu img { width: 40px; height: 40px; background-color: #212021; padding-top: 5px; position: fixed; top: 7px; left: 70%; } #menu img { width: 50px; height: 50px; background-color: #212021; position: fixed; top: -2px; left: 85%; } #search { background-color: #FFFFFF; margin: 10px; padding: 3px; color: #424242; border: 1px solid #212021; border-radius: 10px; } body, html { margin: 0px; overflow-x: hidden; font-family: helvetica; font-weight: 100; } .container { position: fixed; z-index: 1; width: 100%; height: 100%; right: 0; -webkit-transition: right 0.4s ease-in-out; -moz-transition: right 0.4s ease-in-out; -ms-transition: right 0.4s ease-in-out; -o-transition: right 0.4s ease-in-out; transition: right 0.4s ease-in-out; } .container.open-sidebar { right: 240px; } #sidebar { background: #313031; margin-top: 64px; position: absolute; width: 200px; height: 100%; right: -240px; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #313031; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #FFFFFF; color: #212021; border: 1px solid #313031; } .main-content { width: 100%; height: 100%; padding: 0px; box-sizing: border-box; -moz-box-sizing: border-box; position: fixed; } .main-content .content { box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; width: 100%; } .main-content #sidebar-toggle { background: #212021; border-radius: 4px; display: block; padding: 10px 7px; position: fixed; top: 13px; right: 20px; float: right; } .main-content #sidebar-toggle .bar { display: block; width: 20px; margin-bottom: 3px; height: 3px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-width: 250px) and (max-width: 300px) { #logo a { color: #FFFFFF; text-decoration: none; font-family: "Oxygen", Helvetica, Arial, sans-serif; font-size: 23px; background-color: #212021; position: absolute; top: 15px; left: 10px; } #headerMenu img { width: 37px; height: 37px; background-color: #212021; position: fixed; top: 7px; left: 65%; } #page-content { padding-left: 5%; padding-right: 5%; } #sidebar { background: #313031; margin-top: 64px; position: absolute; width: 170px; height: 100%; right: -240px; box-sizing: border-box; -moz-box-sizing: border-box; } } @media only screen and (min-width: 0px) and (max-width: 250px) { #logo a { color: #FFFFFF; text-decoration: none; font-family: "Oxygen", Helvetica, Arial, sans-serif; font-size: 19px; background-color: #212021; position: fixed; top: 17px; left: 5px; } #headerMenu img { width: 35px; height: 35px; background-color: #212021; position: absolute; top: 7px; left: 60%; } #page-content { padding-left: 10px; padding-right: 10px; } .container.open-sidebar { right: 250px; } #sidebar { background: #313031; margin-top: 64px; position: absolute; width: 100%; height: 280px; right: -250px; box-sizing: border-box; -moz-box-sizing: border-box; } } @media only screen and (min-height: 300px) and (max-height: 400px) { #sidebar ul li a { padding-top: 15px; padding-bottom: 15px; padding-left: 25px; font-size: 15px; font-weight: 100; } } @media only screen and (min-height: 0px) and (max-height: 300px) { #sidebar ul li a { padding-top: 7px; padding-bottom: 7px; padding-left: 25px; font-size: 13px; font-weight: 100; } } 

 <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <body id="all"> <div id="headerMenu"> <div id="logo"> <a href="/">Seventy Three</a> </div> </div> <div id="page-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> <div class="container"> <div id="sidebar"> <ul> <form action="/search" mathod="POST"> <li> <input id="search" size=15 type="text" placeholder="search..."> </li> </form> <li> <hr> </li> <li><a href="/index.html">Home</a> </li> <li><a href="/about">About</a> </li> <li><a href="/projects">Projects</a> </li> <li> <hr> </li> <li><a href="/register">Login / Sign Up</a> </li> </ul> </div> <div class="main-content"> <div class="swipe-area"></div> <a data-toggle=".container" id="sidebar-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> </div> </div> </body> 

Any help Appreciated.

Answer 1

It seems like you're using fixed elements to catch swipes.

This kind of CSS will prevent any clicks to go through.

.container {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
}

The solution is to apply that styling inside of @media , to target only mobile devices, where you need swipes.

Answer 2

The issue here is with the z-index of the #page-content .

everything is covering it and the links are not reachable.

try to add the following

 #page-content {
    position: absolute;
    top: 100px;
    z-index: 100;
    padding-left: 20%;
    padding-right: 20%;
}

This will solve your problem