Question

我有同一页面中各个部分的树链接，但是在每个页面中只重新加载2个工作到他们应该去的地方。我发布了整个代码。它使用JQuery动画，很难我在我的代码中不包括它我仍然有同样的问题。

这是小提琴链接

这是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>

和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%;
    }
}

Answer 1

这里有几件事。首先，对于像这样的大型文件，您应该在准备运行状态下提交格式化版本。（通常通过jsFiddle完成）

也就是说，catalogos和contacto的div恰好位于同一页面上，因此两者都在工作，但由于catalogos以下没有其他内容部分，它们似乎在同一页面上。

另外，这里只是一个注释，您可能希望使用包含id id作为包装器的div而不是页面上的空div。

希望有所帮助！

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

1 个答案: