Question

this is my first website in HTML and I have a little problem. In the "about me" section, there are three hyperlinks that do not work (i cant click them). But, the ones in the drop down menu work. Any idea why?

Here is my code https://jsfiddle.net/2hkhmLef/

<p>
                  I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
                  2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
                  has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
                  and I learn things that interest me. The ultimate goal right now is to graduate and this website will
                  be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
                  them in the <a href="#port_section" class = "intro_link">portfolio</a> section. For my personal weekly activities, you can find out what I've been
                  up to in the <a href="#" class = "intro_link">activities</a> section. Finally, if you are ever interested in checking out my other social
                  networks (GitHub, LinkedIn, etc...) or to contact me, you can go to the <a href="#" class = "intro_link">contacts</a> section.
</p>

Answer 1

您的.menu已height: 100vh且位于nav position: fixed内，因此它始终占据视口的100％，因此当您点击时，您就是总是点击.menu。

如果您将css更改为：

https://jsfiddle.net/2hkhmLef/1/

.menu {
  width: 100%;
  height: 92px;
  margin-bottom: 100vh;
}

它仍会推迟内容，然后它不会阻止链接。

我无法在您的HTML中看到图片，所以我无法帮助您，但是，这是超级hacky 而且我不推荐它，但如果你只需要点击链接：

.menu {
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.menu ul {
    pointer-events: all;
}

也会解决这个问题。

Answer 2

这里的问题是你设置高度占据整个视口100vh。这应该解决它。

.main {
 width: 100%;
 height: 100%;

Answer 3

由于@Dave在答案中已经涵盖了保证金，我想补充一个额外的建议，让你的<a>工作为按钮。

li a{
  display:block;
  padding:10px;
}

li{
  padding:0 !important;
}

您需要添加到您的特定课程。

这是针对您的<a>无效问题。

.menu{
  height: arbitary // As per your requirement.
}

＆＃13;

@font-face {
  src: url(Gravity-Light.otf);
  font-family: Gravity;
}


/* ------------------HOME---------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: lighter;
}

.menu {
  width: 100%;
  height: 100vh;
}

.homeImg {
  background-image: url(img/web_bg.jpg);
  height: 100%;
  background-position: 30% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.homeImg h1 {
  color: white;
  text-shadow: 2px 2px 9px black;
  font-family: Gravity;
  font-weight: 1000;
  font-size: 75px;
  position: absolute;
  top: 38%;
  left: 70%;
  transform: translateX(-50%) translateY(-50%);
}

.homeImg h2 {
  font-family: Gravity;
  font-weight: 100;
  font-size: 35px;
  position: absolute;
  top: 65%;
  left: 68.1%;
  transform: translateX(-50%) translateY(-50%);
}


/* ------------------ABOUT ME---------------------------- */

.aboutMe {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.aboutMe p {
  font-family: Gravity;
}

.aboutMe h1 {
  color: #212529;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #212529;
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;
  ;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

#front-name {
  font-weight: 1000;
  font-family: Gravity;
  font-size: 50px;
  letter-spacing: 3px;
  position: absolute;
  top: 42%;
  right: 5%;
  transform: translate(-50%, -50%);
}

#front-subtitle {
  font-family: Gravity;
  font-size: 25px;
  font-weight: 200;
  position: absolute;
  top: 52%;
  right: 8.25%;
  transform: translate(-50%, -50%);
}

#home:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#portfolio:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#activity:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#contact:hover {
  background-color: rgba(220, 220, 220, 0.15);
}

#welcome_msg {
  text-align: center;
}

.intro_link {
  text-decoration: none;
  color: #4a69bd;
}

.intro_link:hover {
  color: red;
}

.content {
  font-family: Gravity;
}


/* ------------------PORTFOLIO---------------------------- */

.portfolio {
  width: 94%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.portfolio_title {
  text-align: center;
  color: #212529;
}


/* ------------------MEDIA---------------------------- */


/* MENU SECTION */

@media(max-width: 1024px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #212529;
  }
  nav.black ul {
    background: #212529;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}


/*IPHONES*/

@media only screen and (max-width: 414px) {
  .homeImg h1 {
    color: white;
    text-shadow: 2px 2px 9px black;
    font-family: Gravity;
    font-weight: 1000;
    font-size: 40px;
    position: absolute;
    top: 30%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
  }
  .homeImg h2 {
    font-size: 0px;
  }
}


/*IPAD*/

@media only screen and (min-width: 415px) and (max-width: 768px) {
  .homeImg h1 {
    color: white;
    text-shadow: 2px 2px 9px black;
    font-family: Gravity;
    font-weight: 1000;
    font-size: 45px;
    position: absolute;
    top: 33%;
    left: 74%;
    transform: translateX(-50%) translateY(-50%);
  }
  .homeImg h2 {
    font-size: 0px;
  }
}


/*IPAD PRO*/

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .homeImg h1 {
    color: white;
    text-shadow: 2px 2px 9px black;
    font-family: Gravity;
    font-weight: 1000;
    font-size: 75px;
    position: absolute;
    top: 38%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
  }
  .homeImg h2 {
    font-size: 0px;
  }
}


/* INTERNET RE-SZIE */

.menu {
  height: 30px;
}

li a {
  display: block;
  padding: 10px;
}

li {
  padding: 0 !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
  <!-- Menu -->
  <div class="menu" id="home_section">
    <nav>
      <div class="menu-icon">
        <i class="fa fa-bars fa-2x"></i>
      </div>

      <div class="logo">
        MOHANAD ARAFE
      </div>

      <div class="menu">
        <ul>
          <li id="home"><a href="#home_section">Home</a></li>
          <li id="portfolio"><a href="#port_section">Portfolio</a></li>
          <li id="activity"><a href="#">Activities</a></li>
          <li id="contact"><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
    <!-- Home Text -->
    <div class="homeImg">
      <h1>MOHANAD ARAFE</h1>
      <h2>current software engineering student & self-taught programmer</h2>
    </div>
  </div>

  <!-- About Me -->
  <div class="aboutMe">
    <h1 id="welcome_msg">Welcome to my personal website!</h1>
    <p>
      In here, you will find out everything about me. You can scroll down to discover more about my portfolio, my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself!
    </p>
    <p>
      I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my 2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience has been wonderful. I meet great people that share similar interests,
      my network is growing day-by-day and I learn things that interest me. The ultimate goal right now is to graduate and this website will be used to explore everything I learn as I go. For my school assignments and personal projects, you can find them
      in the <a href="#port_section" class="intro_link">portfolio</a> section. For my personal weekly activities, you can find out what I've been up to in the <a href="#" class="intro_link">activities</a> section. Finally, if you are ever interested
      in checking out my other social networks (GitHub, LinkedIn, etc...) or to contact me, you can go to the <a href="#" class="intro_link">contacts</a> section.
    </p>
  </div>

  <!-- Portfolio -->
  <div class="portfolio" id="port_section">
    <h1 class="portfolio_title">Portfolio</h1>
  </div>

  <script type="text/javascript">
    // Menu-toggle button
    $(document).ready(function() {
      $(".menu-icon").on("click", function() {
        $("nav ul").toggleClass("showing");
      });
    });
    // Scrolling Effect
    $(window).on("scroll", function() {
      if ($(window).scrollTop()) {
        $('nav').addClass('black');
      } else {
        $('nav').removeClass('black');
      }
    })
  </script>

  <script>
    // Select all links with hashes
    $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
        // On-page links
        if (
          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
          location.hostname == this.hostname
        ) {
          // Figure out element to scroll to
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          // Does a scroll target exist?
          if (target.length) {
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000, function() {
              // Callback after animation
              // Must change focus!
              var $target = $(target);
              $target.focus();
              if ($target.is(":focus")) { // Checking if the target was focused
                return false;
              } else {
                $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
                $target.focus(); // Set focus again
              };
            });
          }
        }
      });
  </script>

</body>

＆＃13;

Answer 4

这是一个CSS问题，你有.menu类，其属性为height: 100vh;，这涵盖了整个页面，所以当你点击该链接时，你不是点击该链接而是点击菜单div除此之外，这就是为什么你不能点击它。

我的<a> tag won't work?

4 个答案:

我的<a> tag won&#39;t work?

4 个答案:

我的<a> tag won't work?