jquery - 我无法单击、选择或突出显示元素

Question

网站很简单，这里是: http://urbanphenomena.net/shukri/

在元素页面中，A01-FAF-1 到 6，如您所见，它不可选择或不可点击....

我认为标题是问题所在，因为我尝试删除它并且它起作用了。那么，如何使这些链接在标题仍然存在的情况下仍可点击？

/* Fonts */

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/******************************* CSS Reset ************************************/

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
}


/* remember to define focus styles! */

:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  background: white;
}

ol, ul {
  list-style: none;
}


/* tables still need 'cellspacing="0"' in the markup */

table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}


/******************************************************************************/

nav {
  text-align: left;
  background-blend-mode: saturation;
}


/* li & a customization */

a[title] {
  color: #e4002b;
  font-size: 13px;
}

a:link, a:visited {
  color: #e4002b;
  text-decoration: none;
}

a:hover, a:visited:hover {
  color: white;
  text-decoration: none;
  background-color: #e4002b !important;
}


/* ul menu */

.nav> li {
  font-family: 'Droid Sans';
  position: relative;
  display: block;
}

.nav> li> a {
  position: relative;
  display: block;
  padding: 2px 2px;
}

.nav> li> a:hover, .nav> li> a:focus {
  text-decoration: none;
  background-color: #eee;
}


/* Website title */

.navbar h5, .navbar h6 {
  color: #b1b1b0;
  font-family: 'Droid Sans';
  padding-bottom: 6.5px;
}

#droid h5, #droid h6 {
  font-family: 'Droid Arabic Kufi'
}

.navbar h5 {
  font-size: 13px;
}

.navbar h6 {
  font-size: 10px;
}

.gutter-20.row {
  margin-right: -10px;
  margin-left: -10px;
}

.gutter-20> [class^="col-"], .gutter-10> [class^=" col-"] {
  padding-right: 10px;
  padding-left: 10px;
}


/* Sliders & Pages Costumization */

.home-section img {
  width: 100%;
  height: 100%;
}


/* circle customization */

.circle {
  width: 200px;
  height: 200px;
  background: black;
  -moz-border-radius: 90%;
  -webkit-border-radius: 90%;
  border-radius: 90%;
  position: absolute;
  top: 80%;
  left: -50px;
}


/* Text inside the circle */

.text {
  color: red;
  position: absolute;
  left: 25%;
  top: 20%;
}

.big, .sub-big {
  color: #F5C52C;
  font-family: 'Droid Sans';
}

.top-text, .saudi {
  font-family: 'Droid Sans';
  color: white;
}

.top-text {
  position: absolute;
  font-size: 11px;
  left: -7px;
}

.big {
  font-size: 35px;
  position: absolute;
  left: -20px;
  top: 30px;
}

.sub-big {
  font-size: 14px;
  font-weight: normal;
  position: relative;
  top: 70px;
  left: -20px;
}

.saudi {
  position: absolute;
  font-size: 13px;
  top: 115px;
  left: 29px;
}


/* About Page */

#section2 {
  color: #b1b1b0;
  background-image: url(../imgs/about-background.jpg);
  background-size: cover;
}

#section2.background--dark {
  color: red;
}


/* Black Overlay */

.overlay {
  background-color: white;
  opacity: 0.8;
  position: absolute;
  height: 100%;
  width: 65%;
  left: 35%;
  background: -webkit-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

#section2 p, #section2 h3, #section2 h5 {
  text-align: right;
}


/* Projects Page */

#section4 {
  background-image: url(../imgs/projects-background.png);
  background-size: cover;
}

.bullet {
  z-index: 100;
}

/* contact Page */

.contact-section span {
  color: #e4002b;
}

.contact-section a {
  color: black;
}

.contact-section a:Hover {
  color: white;
}


/* Other */

.home-section, .about-section, .projects-section, .contact-section {
  padding-top: 95px;
  font-family: 'Droid Sans';
}

<!DOCTYPE html>
<html>
  <head>
    <!-- Meta Tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Title -->
    <title>MHS &mdash; Architectural Consultant</title>
    <!--- Bootstrap.css --->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
    <!--- Bootstrap Theme --->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
    <!--- Other --->
    <link rel="stylesheet" type="text/css" href="js/pagePiling/jquery.pagepiling.css" />
    <!--- style.css --->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--- Responsive.css --->
    <link rel="stylesheet" type="text/css" href="css/responsive.css" />
    <!-- fancyBox -->
    <link rel="stylesheet" type="text/css" href="fancyBox/dist/jquery.fancybox.min.css"/>
  </head>
  <!------------------------------------------------------------------->
  <body>
    <!-- <div class="container-fluid">
      <div class="row gutter-20">
      <div class="col-lg-1" style="background-color: red;">1</div>
      <div class="col-lg-1" style="background-color: blue;">2</div>
      <div class="col-lg-1" style="background-color: red;">3</div>
      <div class="col-lg-1" style="background-color: blue;">4</div>
      <div class="col-lg-1" style="background-color: red;">5</div>
      <div class="col-lg-1" style="background-color: blue;">6</div>
      <div class="col-lg-1" style="background-color: red;">7</div>
      <div class="col-lg-1" style="background-color: blue;">8</div>
      <div class="col-lg-1" style="background-color: red;">9</div>
      <div class="col-lg-1" style="background-color: blue;">10</div>
      <div class="col-lg-1" style="background-color: red;">11</div>
      <div class="col-lg-1" style="background-color: blue;">12</div>
      </div>
      </div> -->
    <!-- Navigation Menu -->
    <header class="container-fuild navbar-fixed-top">
      <div class="row gutter-20">
        <nav class="navbar-nav col-lg-3 pull-right">
          <div class="navbar">
            <img style="padding-top: 20px;" src="imgs/logo.png" alt="Logo" width="58"/>
            <br><br>
            <div id="droid">
              <h5 dir="rtl">مكتب محمد حسين شكري</h5>
              <h6 dir="rtl">للإستشارات المعمارية</h6>
            </div>
            <h5>Mohammed H Shukri</h5>
            <h6>Architectural Consultants</h6>
          </div>
          <ul class="nav nav-stacked col-lg-4" id="menu">
            <li data-menuanchor="page1" class="nav-item slide1 active"><a href="#page1" title="HomePage">Home</a></li>
            <li data-menuanchor="page2" class="nav-item slide2"><a href="#page2" title="About Shukri">About Us</a></li>
            <li data-menuanchor="page3" class="nav-item slide3"><a href="#page3" title="Projects">Our Projects</a></li>
            <li data-menuanchor="page4" class="nav-item slide5"><a href="#page4" title="Contact Info">Contact Us</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- Start of PagePiling -->
    <div id="pagepiling">
    <!-- Home section -->
    <div class="section home-section" id="section1">
      <div class="container-fluid">
        <!-- Circle -->
        <div class="col-lg-8 col-lg-push-1">
          <a href="http://www.atc-saudiarabia.com/" title="Click for more information" target="_blank">
            <div class="circle">
              <div class="text row">
                <span class="top-text">MHS ARCHITECTURAL OFFICE</span>
                <span class="big">AUTODESK</span>
                <span class="sub-big">Authorized Training Center</span>
                <span class="saudi">Saudi Arabia</span>
              </div>
            </div>
          </a>
          <!-- Image and &copy; -->
          <table class="table-responsive">
            <tbody>
              <tr>
                <img class="img-responsive" src="imgs/mhs-home.jpg" alt="MHS Home"/>
              </tr>
              <br>
              <tr>
                <p style="color: #996666;font-family: 'Droid Sans';font-size: 10px;" class="pull-right">Copyright © Mohammed H Shukri Architectural Office. All rights reserved</p>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="section" id="section2">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-8 pull-right overlay"></div>
          <!-- overlay -->
        </div>
        <div class="about-section">
          <div class="row">
            <div class="col-lg-4 col-lg-push-5">
              <table class="table-responsive table">
                <tbody>
                  <tr>
                    <td>
                      <h3 style="color: #e4002b;">About US</h3>
                      <br>
                      <h5>INTRODUCTION</h5>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p><span>Great architecture</span> is not made but evolves from a mysterious alchemy of mind,
                        efforts and technology. That’s what makes architecture alluring.
                        The current education, infrastructures,
                        transportation and industrialization activities around the kingdom has given architects,
                        engineers, planners and entrepreneurs tremendous opportunities to build to suit
                        the required paradigm favorable for building design, its management,
                        its energy issues and operations.
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p><span>MHS Architectural Office</span> has similar vision,
                        not only demystify technology modeling in general but also to provide tips,
                        training and information system that will help clients/companies,
                        other architects and engineers to achieve efficient design and aid in energy modeling,
                        the assumptions, coordination process,
                        including the tools and what the output means to potential design decisions.
                        Therefore the need to identify best practices and deliver quality tools to perform
                        in-depth performance analysis has never been greater. Reliable and consistent full-building system,
                        energy and operational analysis are necessary to achieve increasingly aggressive performance
                        targets in the building design and construction sectors.
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p><span>MHS Architectural Office</span> is primarily a science based team,
                        as opposed to data-based team.
                        It is comprised of experienced professionals in the fields of architecture, urban design,
                        engineering, planning, IT and Information management.
                        The team is headed by <b>Arch. Mohammed H. Shukri</b>, the General Manger Consultant Architect with 20 Years experience.
                        <b>Eng. Jurgen Schluter</b>, Consultant Civil with 30 Years experience.
                        <b>Eng. Mohammed Zahiruddin Siddiqi</b>, Consultant Architect with 36 years Experience.
                        <b>Eng. Wahbi Mohammed Maad</b>, Civil Engineer with 13 Years experience.
                        <b>Eng. Abdulaziz S. Rasheedi</b>, Architect-Engineer with 2 years experience.
                        <b>Eng. Anas Al Ahwal</b>, Architect-Engineer and still under training. Mr. Khalid R. Kaddoumi, Coordinating marketing and translation with 36 Years experience. And Mr.Mohammed M. Al Haddad, Accountant with 4 years experience.
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p><span>MHS Architectural Office</span> profusely adopts the latest BIM tools like
                        the Autodesk Revit in Architecture, MEP and Structure.
                        Being an Autodesk “Authorized Training Center” and “Authorized Accrediting Center”
                        and networking with industry peers to simplify the design process to achieve better results in
                        terms of efficiency, economy of time, money, efforts,
                        and coordination which minimize the likelihood of common mishaps which otherwise is so
                        prevalent in the conventional practices.
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p><span>As architects</span>, we have to be fearless to visualize the tomorrow,
                        because it will be the tomorrow that decides the worthiness of what we do today.
                        So how do we build the kind of flexibility needed into our thought process, building system,
                        material selection, so that it bends to the future’s need?
                      </p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Projects section -->
    <div class="section projects-section" id="section4">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-9">
          <iframe src="Projects_imgs.html" id="iframe"></iframe>
        </div>
        </div>
      </div>
      <div class="">
          <script>
          function setURL(url){
              document.getElementById('iframe').src = url;
          }
          </script>
          <ol class="bullet">
            <h4>Architecture</h4>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.jpg')">A01-FAF-1</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.jpg')">A01-FAF-2</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.jpg')">A01-FAF-3</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.jpg')">A01-FAF-4</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.jpg')">A01-FAF-5</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/6.jpg')">A01-FAF-6</a><br>
        </ol>
        CUT
        <ol class="bullet">
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/1.jpg')">A02-KSAF-1</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/2.jpg')">A02-KSAF-2</a><br>
        </ol>
        CUT
        <ol class="bullet">
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/1.jpg')">A03-KSAF10V-1</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/2.jpg')">A03-KSAF10V-2</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/3.jpg')">A03-KSAF10V-3</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/4.jpg')">A03-KSAF10V-4</a><br>
        </ol>
        CUT
        <ol class="bullet">
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/1.jpg')">A03-Makkah-1</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/2.jpg')">A03-Makkah-2</a><br>
          <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/3.jpg')">A03-Makkah-3</a><br>
          CUT
        </ol>
          <ol class="bullet">
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/1.jpg')">A05-Marina-1</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/2.jpg')">A05-Marina-2</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/3.jpg')">A05-Marina-3</a><br>
          </ol>
          CUT
          <ol class="bullet">
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/1.jpg')">A06-Residential-1</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/2.jpg')">A06-Residential-2</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/3.jpg')">A06-Residential-3</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/4.jpg')">A06-Residential-4</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/5.jpg')">A06-Residential-5</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/6.jpg')">A06-Residential-6</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/7.jpg')">A06-Residential-7</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/8.jpg')">A06-Residential-8</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/9.jpg')">A06-Residential-9</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/10.jpg')">A06-Residential-10</a><br>
          </ol>
          CUT
          <ol class="bullet">
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/1.jpg')">A07-SAB4-1</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/2.jpg')">A07-SAB4-2</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/3.jpg')">A07-SAB4-3</a><br>
            <a href="#" type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/4.jpg')">A07-SAB4-4</a><br>
          </ol>
      </div>
    </div>
    <!-- Contact section -->
    <div class="section contact-section" id="section5">
      <div class="container-fluid">
        <section>
          <td>
            <table class="table-responsive col-lg-2 pull-right col-lg-pull-3">
              <tr>
                <td>
                  <table>
                    <th>
                      <h2 style="text-align: right;">Contact Info</h2>
                      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3707.4593601114393!2d39.11564391555963!3d21.684878785646706!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15c3d8573311112f%3A0x14419887a83d128!2s4938+Al+Basatin%2C+Al+Basatin+District%2C+Jeddah+23718%C2%A08811!5e0!3m2!1sen!2ssa!4v1484227964624"
                        width="900" height="600"></iframe>
                      <br>
                    </th>
                    <tr>
                      <td style="text-align: right;">
                        <span>Tel :</span>+966122345362<br><br>
                        <span>Fax :</span>+966126949635<br><br>
                        <span>Email :</span> <a href="mailto:info@mhs-arch.com">info@mhs-arch.com</a>
                        <br><br>
                        <span>Website :</span> <a href="http://www.mhs-arch.com" target="_self">http://www.mhs-arch.com</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </section>
      </div>
    </div>
    <!--- JQuery --->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!--- Bootstrap JS --->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- PagePiling.js -->
    <script type="text/javascript" src="js/pagePiling/jquery.pagepiling.min.js"></script>
    <script>
    $(document).ready(function () {
  $('#pagepiling').pagepiling({
    menu: '#menu',
    anchors: ['page1', 'page2', 'page3', 'page4'],
    sectionsColor: ['#ffffff', '', '#ffffff', '#e5e5e5', '#ffffff'],
    direction: 'horizontal',
    scrollingSpeed: 800,
    navigation: null,

  });
});
    </script>
  </body>
</html>

Answer 1

将其添加到您的 style.css 中。

.navbar-fixed-top, .navbar-fixed-top > div {
    height: 0;
}

这不是最好的解决方案，但它确实有效。

希望这对您有所帮助。