堆栈内存溢出
  简体   繁体   English

同一页面上的多个链接不起作用

[英]Same page multiple links not working

 原文  2015-08-18 15:05:55  1   1    javascript/ jquery/ html/ css/ hyperlink

问题描述

I've got tree links to sections in the same page, but in every page reload just 2 work to the place they should go. 我在同一页面中有指向各节的树形链接，但是在每个页面中，只有2个工作重新加载到它们应该去的地方。 I'm posting the whole code. 我要发布整个代码。 It uses a JQuery animation, tough I don't include it in my code I still have the same issue. 它使用了JQuery动画，很难的是我没有在代码中包含它，但我仍然遇到同样的问题。

Here's the Fiddle link 这是小提琴链接

https://jsfiddle.net/xfxweL5u/ https://jsfiddle.net/xfxweL5u/

Here's the HTML 这是HTML 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Servicios Electrónicos de Radiocomunicación, somos una empresa de integración profesional de equipos de radiocomunicación que inicio operaciones el 1 de Enero de 1997, en la cuidad de Toluca, Estado de México.">
<meta name="author" content="Sercom">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Sistemas de Radiocomunicación México | SERCOM</title>

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
<link rel="icon" href="img/touch-icon-iphone.png">
<link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
</head>
<body>
<nav>
<a href="http://www.sercom.mx"><img src="img/sercom-logo.svg" class="logo"></a>
<ul id="menu-list">
<li><a href="#marcas">Marcas</a></li>
<li><a href="#catalogos">Catálogos</a></li>
<li><a href="#contacto">Contacto</a></li>
<li><img src="img/search.svg" id="search"></li>
<li><input type="text" id="search-input" placeholder="Buscar en Sercom.com" style="display: none;"></li>
</ul>
</nav>
<div id="slide1" class="slide">
<div class="title">
<img src="img/sercom-logo.png" id="sercom-logo">
<p>Sistemas de Radiocomunicación México</p>
<div id="separator"></div>
<p id="solutions-in">Diseñando soluciones especializadas en <span id="changing-text">CCTV</span></p>
</div>
</div>
<!--    <div id="hero">
<p>Sistemas de Radiocomunicación México</p>
</div> -->
<main>
<div class="columns-wrapper">
<div class="section-title">
<h2>Acerca de Nosotros</h2>
</div>
<div class="about-us-content">
<p>Servicios Electrónicos de Radiocomunicación, somos una empresa de integración profesional de equipos de radiocomunicación que inicio operaciones el 1 de Enero de 1997, en la cuidad de Toluca, Estado de México.</p>
<p>Somos orgullosamente parte de la familia de con el objetivo de prestar servicios de consultoría, asesoría y soporte técnico de equipos y programas de radiocomunicación, además del desarrollo de proyectos de conectividad, redes y telecomunicaciones tanto de área local, amplia y extendida así como la prestación de servicios y soporte en el área de comunicación digital y convencional.</p>
</div>
<h3>Muestra de clientes</h3>
</div>
<div class="columns-wrapper" id="marcas">
<div class="section-title">
<h2>Nuestras marcas</h2>
</div>
<div class="about-us-content">
<div class="product-brand" id="icom"></div>
<div class="product-brand" id="kenwood"></div>
<div class="product-brand" id="motorola"></div>
</div>
</div>

<div class="columns-wrapper">
<div class="section-title">
<h2>Catálogos</h2>
</div>
<div class="about-us-content">
<p>Descarga nuestra lista de catálogos en PDF (compatible con dispositivos móviles).</p>
<div class="catalogs-list">
<ul>
<li><a href="/radios-kenwood">Radios Kenwood</a></li>
<li><a href="/radios-motorola">Radios Motorola</a></li>
<li><a href="/radios-icom">Radios iCOM</a></li>
<li><a href="/kenwood">Kenwood 2015</a></li>
<li><a href="/motorola">Motorola 2015</a></li>
<li><a href="/icom">iCOM 2015</a></li>
</ul>
</div>
</div>
</div>

<div class="contact">
<div id="contact-banner">
<h2>Contacta con nosotros</h2>
<p>¿Necesitas servicios de consultoría, asesoría o soporte técnico de equipos?</p>
<p>Te ayudaremos a escojer exactamente los productos que necesitas.</p><p>Tenemos la cotizaciones justas para tus necesidades, no dudes en preguntar por nuestras promociones.</p>
</div>
<!-- CONTACTO -->
</div>
<div id="contacto"></div>
<div class="contact-wrapper">
<div class="contact-column">
<a href="tel:+527222167450">
<img src="img/phone-icon.png" class="contact-icon">
<h3>Teléfono</h3>
<p>+52 (722) 216-7450</p></a>
</div>
<a href="https://www.google.com/maps/place/Sercom+México/@19.6977819,-99.1377614,8z/data=!4m2!3m1!1s0x85cd8a5ed4259391:0xf5db22de74582065" target="_blank">
<div class="contact-column">
<img src="img/location-icon.png" class="contact-icon">
<h3>Dirección</h3>
<p>Carlos Hank No. 112-A</p>
<p>Col. El Cielo
<p>Toluca, Edo. de México. CP 56420.</p>
</div>
</a>
<div class="contact-column">
<a href="mailto:contacto@sercom.mx">
<img src="img/mail-icon.png" class="contact-icon">
<h3>Correo</h3>
<p>contacto@sercom.mx</p></a>
</div>
</div>
</main>
<footer>
<div id="catalogos"></div>
<div class="nav-bar-wrapper">
<p>Servicios de Radiocomunicación México</p>
<div class="nav-bar-column">
<p>Catálogos</p>
<ul>
<li><a href="">Radiocomunicación</a></li>
<li><a href="">Radios Kenwood</a></li>
<li><a href="">Radios Icom</a></li>
<li><a href="">Seguridad</a></li>
<li><a href="http://www.syscom.mx" target="_blank">Distribuidor autorizado <span>Syscom</span></a></li>
</ul>
</div>
<div class="nav-bar-column">
<p>Servicios</p>
<ul>
<li><a href="">Acerca de Sercom</a></li>
<li><a href="">Calidad de los productos</a></li>
<li><a href="">Código de ética</a></li>
<li><a href="">Política de garantía</a></li>
<li><a href="">Política de devolución</a></li>
<li><a href="">Aviso de privacidad</a></li>
<li><a href="">Contacto</a></li>
</ul>
</div>
<div class="nav-bar-column">
<p>Soporte</p>
<ul>
<li><a href="">Frecuencias de uso libre</a></li>
<li><a href="">Homologaciones</a></li>
<li><a href="">Garantías, devolución y reparación</a></li>
<li><a href="">Mapa del sitio</a></li>
<li><a href="">Quejas y sugerencias</a></li>
</ul>
</div>
</div>
</footer>
</body>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>

And the CSS 和CSS 

html, body, nav, div, main, p, ul, li, h1, h2{
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

html {
    overflow: hidden;

}

body {
    perspective: 1px;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

li {
    list-style: none;
    margin: 0;
    padding: 0;
    list-style-position: none;
}

body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

main {
    background: #fff;
}

nav {
    z-index: 100;
    width: 100%;
    position: fixed;
    background: linear-gradient(45deg, #293B8F, #3C57A6);
    height: auto;
    font-family: "Futura";
    color: #fff;
    font-size: 1rem;
}

.logo {
    margin: 20px 30px;
    height: 40px;
}

nav ul {
    list-style: none;
    display: inline-block;
    float: right;
    margin-top: 40px;
    margin-right: 20px;
}

nav li {
    display: inline-block;
    margin: 0 10px;
}

h2 {
    width: 100%;
}
.section-title {
    font-family: 'Futura';
    text-transform: uppercase;
    font-weight: bold;
    color: #293B8F;
    border-bottom: 3px solid #293B8F;
    width: 30%;
    margin-right: 70%;
    margin-bottom: 30px;
}

.catalogs-list li{
    background: url('img/sercom-doc-logo.png') no-repeat;
    background-size: 17px;
    margin: 5px 0;
    padding-left: 25px;
}

#search {
    height: 15px;
}

#contact-banner {
    color: #fff;
    background: linear-gradient(
      rgba(60, 87, 166, 0.6), 
      rgba(60, 87, 166, 0.6)
    ),url(img/contact-us.jpg) no-repeat center center; 
    height: 300px;
    text-align: center;
    text-shadow: 0 0 20px #000;
    padding: 160px 5% 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contact-banner h2 {
    font-family: "Futura";
    font-weight: 400;
    font-size: 3rem;
    margin-bottom: 30px;
}

#contact-banner p {
    font-size: 1.4rem;
    font-weight: 300;
}

/*                                  CHANGING TEXT                               */

#sercom-logo {
    width: 80px;
    display: block;
    margin: -50px auto 10px;
}

#separator {
    width: 20%;
    height: 1px;
    background: #FFF;
    margin: 30px auto;
}

#solutions-in {
    margin: 20px 0;
    font-size: 1.4rem;
    font-family: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, sans-serif;
    text-transform: none;
    font-weight: 200;
}

#changing-text {
    color: #FFF;
    font-weight: 600;
}

.nav-bar-wrapper {
    width: 80%;
    margin: 50px 10%;
}

.contact-wrapper::before, .contact-wrapper::after {
    content:"";
    display: table;
    clear:both;
}

.nav-bar-wrapper::before, .nav-bar-wrapper::after {
    content:"";
    display: table;
    clear:both;
}

.nav-bar-column {
    width: 33.33%;
    float: left;
    padding-bottom: 50px;
}

span {
    color: #3C57A6;
    font-weight: 500;
}

a {
    text-decoration: none;
    color: inherit;
}

a:active {
    color: inherit;
}

a:visited {
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

.columns-wrapper {
    padding: 100px 10%;
    width: 80%;
}

.columns-wrapper::before, .columns-wrapper::after {
    content:"";
    display: table;
    clear:both;
}

.about-us-content {
    line-height: 1.5789;
    font-weight: 300;
    width: 100%;
    font-size: 1.1rem;
}

.about-us-content p {
    margin-bottom: 20px;
}

.about-us-content a:hover {
    color: #3C57A6;
}

.product-brand {
    float: left;
    margin: 10px;
    width: 240px;
    height: 240px;
    background: #ddd;
}


#icom {
    background: url(img/icom-logo.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#motorola {
    background: url(img/motorola-logo.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

input#search-input {
    font-size: 1rem;
    border: none;
    margin: none;
    margin-left: -15px;
    padding: 0px;
    background: none;
    color: #FFF;
}

#search-input:focus {
    outline: none;
}

::-webkit-input-placeholder {
   color: #BBB;
} :-moz-placeholder { /* Firefox 18- */
   color: #BBB;  
} ::-moz-placeholder {  /* Firefox 19+ */
   color: #BBB;  
} :-ms-input-placeholder {  
   color: #BBB;  
}

#kenwood {
    background: url(img/kenwood-logo.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.nav-bar-wrapper > p {
    border-bottom: 1px solid #888;
    border-top: 1px solid #888;
    padding: 10px 20px;
    color: #888;
    margin: 20px 0;
    margin-bottom: 40px;
}

.nav-bar-column ul{
    margin: 10px 0;
}

.nav-bar-column li, .nav-bar-column ul {
    font-size: .9rem;
    font-weight: 300;
    margin: none;
    float: none;
    display: block;
}

.nav-bar-column li {
    margin: 5px 0;
}

.contact-wrapper {
    margin: 100px 10%;
    width: 80%;

}

.contact-column {
    float: left;
    width: 33.33%;
    text-align: center;
}

.contact-wrapper a {
    color: inherit;
    text-decoration: none;
}

.contact-icon {
    width: 150px;
    margin-bottom: 10px;
}

#contact-link{
    padding-top: 250px;
    text-align: center;
    font-size: 2rem;
    color: #293B8F;
}

#contact-link a:hover {
    text-decoration: underline;
}

/*                      PARALLAX EFFECT                         */

.slide {
    position: relative;
    padding: 25vh 10%;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    transform-style: inherit;
}

.slide p {
    padding-top: 0px;
    text-align: center;
    font-family: "Futura";
    font-size: 1.6rem;
    color: #fff;
    text-transform: uppercase;
/*  text-shadow: 0 0 20px #000;*/
}

.slide:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.slide:nth-child(2n) .title {
    margin-left: 0;
    margin-right: auto;
}

.slide,
.slide:before {
    background: 50% 50% / cover;
}

#slide1:before {
    background-image: url("img/background.jpg");
    transform: translateZ(-1px) scale(2);
    z-index: -1;
}
/*                      END                         */
/*                      PARALLAX EFFECT                         */

@media screen and (max-width: 700px) and (orientation: portrait){

/*  html {
        overflow: inherit;
    }

    body {
        perspective: none;
        overflow-y: inherit;
        overflow-x: inherit;
    }

    .slide {
    background-size: 100%;
    background: url("img/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: inherit;
    padding: none;
    min-height: none;
    width: 100%;
    box-sizing: block;
    transform-style: none;
    }

    #slide1:before {
    background-image: none;
    transform: none;
    z-index: 0;
    }*/

    #sercom-logo {
        margin-top: 10px;
    }

    #about-us-title {
        width: 80%;
        font-size: 1.2rem;
        margin: 0 10%;
    }

    #contact-banner {
        padding-top: 50px;
    }

    #contact-banner h2 {
        font-size: 1.8rem;
    }


    #contact-banner p {
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.3;
    }

    #about-us-info {
        padding-top: 40px;
        width: 80%;
        margin: 0 10%;
    }

    .contact-column {
        padding: 40px 0;
        width: 100%;
    }

    .contact-icon {
        width: 100px;
        margin-bottom: 0px;
    }

    .logo {
        width: 50%;
        margin: 20px 25% 10px 25%;
    }

    nav ul {
        margin: 10px 0 20px 0;
        width: 100%;
        text-align: center;
    }

    h3 {
        margin: 5px 0;
    }

    #about-us-title {
    border-bottom: 5px solid #293B8F;
    }

    .nav-bar-wrapper {
        margin: 10px 10%;
    }
}

1 个解决方案

解决方案1
 1 已采纳  2015-08-18 15:23:10

Couple of things here. 这里有几件事。 Firstly, for a large file like this you should submit a formatted version in ready to run state. 首先，对于像这样的大文件，您应该提交处于就绪状态的格式化版本。 (usually done through jsFiddle) （通常通过jsFiddle完成）

That said, your div's for catalogos and contacto just happen to be on the same page, so essntially both of them are working but since there is no more content below the catalogos section, they seem to be on the same page. 就是说，您的catalogos和contacto div恰好在同一页面上，因此它们本质上都在工作，但是由于catalogos部分下方没有更多内容，它们似乎在同一页面上。

Also, just a note here, you may want to use the div's containing you id's as wrapper instead of just an empty div on the page. 另外，这里只是一个注释，您可能希望使用包含您ID的div作为包装器，而不是仅使用页面上的空div 。

Hope that helps! 希望有帮助！

暂无
暂无

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

相关问题 指向同一页面的多个链接，但具有不同的信息 - Multiple links to the same page but with different information on it History.go（-1）不适用于具有指向同一页面部分的链接的页面 - History.go(-1) not working for the page that has links to the sections of same page 同一页面中的多个交换不起作用 - multiple swap in same page not working HTML在同一新窗口中打开页面上的多个链接 - Html opening multiple links on the page in a same new window 为灯箱中同一页面上的多个链接制作单独的图库 - Help with making a seperate gallery for multiple links on same page in lightbox 如何使该Javascript与同一页面上的多个链接一起使用？ - How can I get this Javascript to work with multiple links on the same page? 页面中的锚链接不起作用 - Anchor links in page not working Uploadify同一页面上的多个实例不起作用 - Uploadify Multiple instances on same page not working 在同一页面中使用多个Ajax表单 - Working with multiple ajax forms in same page addEventListener不适用于多个链接 - addEventListener not working for multiple links
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM