堆栈内存溢出
  简体   繁体   English

定位标记在导航栏中不起作用

[英]Anchor tags are not working in navigation bar

 原文  2017-11-30 20:34:45  9   2    javascript/ jquery/ html/ css/ anchor

问题描述

My anchor tags for all my ul elements are not working, meaning when I hover over them on the actual site they don't click and nothing happens. 我所有ul元素的锚标记都无法正常工作，这意味着当我将鼠标悬停在实际站点上的锚标记上时，它们不会单击并且什么也没有发生。 The last element works ("Contact") but that's the only one that works. 最后一个元素起作用（“ Contact”），但这是唯一起作用的元素。 I also have other a tags on the website and they work except these on the ul . 我也有其他的a网站上的标签和除这些对他们的工作ul 。

Here's my HTML: 这是我的HTML： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="footer, address, phone, icons" />

    <title>Ask Uptown</title>
    <link rel="stylesheet" href="pp.css">
    <link href="https://fonts.googleapis.com/css?family=Abel|Raleway|Signika|Signika+Negative" rel="stylesheet">
  <body>
    <header>
      <div class="row">
        <div class="logo">
          <h3 class="logo-text">Uptown<span>Ask</span></h3>
        </div>

        <ul id="main-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Stuck? Ask a question!</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Sign up</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>

      <div class="hero">
        <h1>Start Asking now</h1>

        <div class="buttons">
          <a href="#" class="btn btn-one">Ask Now!</a>
          <a href="#" class="btn btn-two">Sign Up Now!</a>
        </div>

      </div>

    </header>
    <section>
      <div class="about">
        <h1>How Uptown Ask works?</h1>
        <p class="paragraph-about">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </section>
    <section>
      <div class="section">
        <div class="card-pic">
          <h4>Ask A Question</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-pic-two">
          <h4>Get An Answer</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-pic-three">
          <h4>Use The Answer</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </section>


            <footer class="footer-distributed">

                <div class="footer-left">

                    <h3>Uptown<span>Ask</span></h3>

                    <p class="footer-links">
                        <a href="#">Home</a>
                        ·
                        <a href="#">Blog</a>
                        ·
                        <a href="#">About</a>
                        ·
                        <a href="#">Contact</a>
                    </p>

                    <p class="footer-company-name">Ask Uptown &copy; 2017</p>
                </div>

                <div class="footer-center">

                    <div class="adress-sec">
                        <p class="p-adress">Address: Tripoli Street, Algeria Road, Mirdif Area - Dubai, United Arab Emirtes</p>
                    </div>

                    <div class="phone-sec">
                        <p>Phone: 04 251 5001</p>
                    </div>

                    <div class="email-sec">
                        <p class="p-email"><a href="mailto:rayanza3eem1234@gmail.com">Email: Uptownschool@gmail.com</a></p>
                    </div>

                </div>

                <div class="footer-right">

                    <p class="footer-company-about">
                        <span>About the company</span>
                        Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
                    </p>

                    <div class="icons">

                        <a href="https://www.twitter.com" target="_blank"><img src="twitter.png" alt="Twitter" class="twitter" ></a>
                        <a href="https://www.facebook.com" target="_blank"><img src="facebook.png" alt="Facebook" class="facebook" ></a>
                        <a href="https://www.instagram.com" target="_blank"><img src="insta.png" alt="Instagram" class="instagram" ></a>

                    </div>

                </div>

            </footer>

  </body>
</html>
code here

And my CSS: 而我的CSS： 

* {
  margin: 0;
  padding: 0;
}

header {
  background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(uptown.jpg);
  height: 65vh;
  background-size: cover;
  background-position: center;
}


.logo img{
  width: 190px;
  height: 65px;
  float: left;
  margin-top: 18px;
}

body{
  font-family: 'Abel', sans-serif;
}

.row{
  width: 1200px;
  margin: auto;
}

.hero{
  position: absolute;
  width: 1200px;
  margin-left: 0;
  margin-top: 0;
}

h1{
  color: white;
  font-size: 40px;
  text-align: center;
  margin-top: 210px;
  margin-left: 55px;
}

.buttons{
  margin-top: 15px;
  margin-left: 490px;
}

.btn{
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 10px;
}

.buttons a:hover{
  background-color: #cdc9c9;
  transition: all 0.5s ease-in;
}

.about{
  width: 100%;
  height: 300px;
  color: #F4F7F8;
}
.about h1{
  color: black;
  margin-top: 60px;
  margin-left: 2px;
  font-family: 'Signika Negative', sans-serif;
  font-weight: 500;
  font-size: 35px;
}

.paragraph-about{
  color:black;
  font-family: 'Signika Negative', sans-serif;
  margin-left: 70px;
  margin-right: 60px;
  margin-top: 30px;
}

.section{
  width: 100%;
  height: 350px;
  background-color: #F4F7F8;
}


.card-pic{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 60px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}

.card-pic h4 {
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}


.card-pic-two{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 485px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}
.card-pic-two h4{
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic-two p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}

.card-pic-three{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 900px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}
.card-pic-three h4{
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic-three p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}

#main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

#main-nav li {
  display: inline-block;
}

#main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: 'Signika', sans-serif;
  font-size: 19px;
}

#main-nav li.active a {
  border: 1px solid white;
}

#main-nav li:hover a {
  border: 1px solid white;
}

.footer-distributed{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;

    padding: 55px 50px;
    margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
    width: 40%;
}

/* The company logo */

.footer-distributed h3{
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
}

.footer-distributed h3 span{
    color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}

.footer-distributed .footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}

.footer-distributed .footer-company-name{
    color:  #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
    width: 35%;
}

.footer-distributed .footer-center i{
    background-color:  #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p{
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin:0;
}

.footer-distributed .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}

.footer-distributed .footer-center p a{
    color:  #5383d3;
    text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
    width: 20%;
}

.footer-distributed .footer-company-about{
    line-height: 20px;
    color:  #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-company-about span{
    display: block;
    color:  #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-distributed .footer-icons{
    margin-top: 25px;
}

.footer-distributed .footer-icons a{
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-right: 3px;
    margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

    .footer-distributed{
        font: bold 14px sans-serif;
    }

    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .footer-distributed .footer-center i{
        margin-left: 0;
    }

}

.twitter{
  width: 42px;
  height: 42px;
}


.facebook{
  width: 42px;
  height: 42px;
}

.instagram {
  width: 40px;
  height: 40px;
}

.icons{
  margin-top: 20px;
}


.adress{
  width: 30px;
  height: 30px;
  margin-right: 40px;
}

.email{
  width: 40px;
  height: 40px;
}

.phone{
  width: 20px;
  height: 20px;
}

.adress-sec{
  margin-bottom: 25px;
}

.phone-sec{
  margin-bottom: 20px;
}

.logo-text{
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
    margin-top: 12px;
    float: left;
}

.logo-text span{
  color: #5383d3;
}

if I remove the float: right command on the main-nav, it works but then it's not on the right place. 如果我在主导航上删除了float: right命令，它可以工作，但是不在正确的地方。

2 个解决方案

解决方案1
 1 已采纳  2017-11-30 20:54:43

Your class hero has a position of absolute and the h1 tag inside has a maring-top of 210px. 您的职业hero的位置是absolute并且内部的h1标签maring-top为210px。 This makes the hero div to overlay the buttons therefore making them un-clickable. 这使英雄div覆盖了按钮，因此使它们不可单击。

A tip is to get to know your browser's devtools, it is a really powerful debugging tool. 提示是要了解您的浏览器的devtool，这是一个非常强大的调试工具。

Since hero is a absolute element,use the css property top Instead of using margin-top . 由于hero是绝对元素，因此请使用css属性top，而不要使用margin-top 。 This will not influence with the other elements. 这不会影响其他元素。 Have a look in your developer console: 在开发人员控制台中查看： 

.hero{
  position: absolute;
  width: 1200px;
  margin-left: 0;
  margin-top: 0;
  top: 210px;
}

h1{
  color: white;
  font-size: 40px;
  text-align: center;
  margin-left: 55px;
}

with margin 有余地 在此处输入图片说明 With top 带顶 在此处输入图片说明

解决方案2
 0  2017-11-30 21:03:12

i believe your problem starts in this part in css file: 我相信您的问题开始于CSS文件的这一部分： 

.hero{
  position: absolute;
  width: 1200px;
  margin-left: 0;
  margin-top: 0;
}

you defined hero div to cover over the li's so you cant hover over them anymore.whenever you put the mouse over them its on the .hero div and not emitting the hover event needed for CSS. 您将hero div定义为覆盖li的对象，因此您无法将它们悬停在上面。无论何时将鼠标悬停在它们的.hero div上，都不会发出CSS所需的悬停事件。

my advice is whenever you are stuck like this right click and start using "inspect element". 我的建议是，每当您像这样右键单击而陷入困境并开始使用“检查元素”时。 next time you will see it on your own. 下次您会自己看到它。

you can remove the "position:absolute" and it will work then. 您可以删除“ position：absolute”，然后它将起作用。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 导航锚标记不起作用，但是为什么呢？ - Navigation anchor tags not working, but why? 如何不在侧面导航和顶部导航栏中定位定位标记 - How to not target anchor tags in side navigation and top navigation bar 没有带锚标签的重新加载导航 - No reload navigation with anchor tags 粘性导航栏<a>标签</a> - Sticky Navigation bar <a> tags 锚标记在IE8中不起作用 - Anchor tags not working in IE8 锚标签在jquery滑块中不起作用 - Anchor tags not working in jquery slider 我的锚标签不起作用。 - My anchor tags are not working. 动态插入的锚标签不起作用 - dynamically inserted anchor tags are not working JQuery Smooth Scroll to Anchor with Sticky Navigation Bar - JQuery Smooth Scroll to Anchor with Sticky Navigation Bar 响应式导航栏不起作用 - Responsive navigation bar is not working
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM