我目前正在开发一个使用 bootstrap 3 做出响应的单页视差网站。外部链接今天早上可以工作，但在一天中我添加了模式窗口和导航栏，现在内容中的任何链接都不起作用。您可以在http://demo.red-tieafrica.co.za/egstart/index1.php访问该网站，如果您点击现在做广告的链接，您就会明白我的意思。
当前代码是：
<!DOCTYPE html>
<html>
<head>
<title>My Hardware - Essential Hardware online advertising and marketing Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Racing+Sans+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/template.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ############ NAVBAR START ##################################################################################################### -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!--<a href="#" class="navbar-brand">Essential Group - My Hardware</a>-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="navscroll" class="nav navbar-nav navbar-left">
<li class="current navblocks"><a href="#first">My Hardware</a></li>
<li class="navblocks"><a href="#second">I'm a Member</a></li>
<li class="navblocks"><a href="#third">I'm a Supplier</a></li>
<li class="navblocks"><a href="#theend">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our other sites<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.essentialgroup.co.za">Essential Group</a></li>
<li><a href="http://www.letstalkhardware.co.za">Lets Talk Hardware</a></li>
<li><a href="http://www.talkorange.co.za">Talk Orange</a></li>
</ul>
</li>
</ul>
</div> <!-- Close Collapse -->
</div> <!-- close container -->
</div> <!-- close navbar -->
<br />
<!-- ############ HOME PAGE START ##################################################################################################### -->
<!-- Section #1 / Intro -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<article>
<div class="container">
<div class="row"><div class=".col-lg-12"><img src="images/hardware-logo.png" class="img-responsive" alt="Responsive image" width="1500" height="300" />
<p>Please scroll down to view website either using your mouse or the scroll bar down the side of the page</p>
</div>
</div>
</article>
</section>
<!-- ############ MEMBERS PAGE START ##################################################################################################### -->
<!-- Section #2 / Background Only -->
<section id="second" class="story" data-speed="4" data-type="background" data-slide="2">
<div class="cone1" data-type="sprite" data-offsetY="-300" data-Xposition="75%" data-speed="-2"></div>
<article>
<h2>I'm a Member:</h2>
<p>Grow your margin by letting your community know what you offer through effective marketing and advertising through the advertising and marketing portal
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal_mem" class="orange-txt">Details ...</a>
<br /><br />
<ul class="nav nav-pills">
<li><a href="http://www.google.co.za">Advertise Now!</a></li>
</ul></p>
</article>
</section>
<!-- ############ SUPPLIERS PAGE START ##################################################################################################### -->
<!-- Section #3 / Photos -->
<section id="third" class="story" data-speed="4" data-type="background" data-slide="2">
<div class="photograph" data-type="sprite" data-offsetY="1250" data-Xposition="75%" data-speed="2" data-slide="3"></div>
<article>
<h2>I'm a Supplier:</h2>
<p>
<strong>B2C - Supplier to Consumer - Promotions
<br />
Make your sales people the HERO.</strong></p>
<p>Allow your sales people to assist member stores with this unique co-operative promotional tool…a first of its kind. </p>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal_b2c" class="orange-txt">Details ...</a>
<br /><br />
<p><strong>B2B - Supplier to Buyer - Specials & Promos </strong></p>
<p>CUT THROUGH the clutter and ensure you're visibly "Top Of Mind"
Communicate directly with store owners and buyers through our various channels...</p>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal_b2b" class="orange-txt">Details...</a>
<br /><br />
<p> <em>"Life is change. Growth is optional. Choose wisely" - <strong>Karen Kaiser Clark</strong></em></p>
<ul class="nav nav-pills"><li>
<a href="http://blinkdigital.netprintmanager.com/public/index.asp?purl=essentialpromotions">Advertise Now!</a></li></ul>
</article>
</section>
<!-- ############ CONTACT PAGE START ##################################################################################################### -->
<!-- Section #5 / The End-->
<section id="theend" class="story" data-speed="8" data-type="background" data-offsetY="250" data-slide="4">
<div class="byebye" data-type="sprite" data-offsetY="-1600" data-Xposition="50%" data-speed="-2"></div>
<article>
<h2>Contact Us</h2>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: My Hardware Portal';
$to = 'info@red-tieafrica.co.za';
$subject = 'Enquiry';
$human = $_POST['human'];
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit'] && $human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<p>You answered the anti-spam question incorrectly!</p>';
}
?>
<div class="textbox">
<form method="post" action="index1.php">
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</article>
</section>
<script src="js/parallax.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
<script>
$('#navscroll').onePageNav({
currentClass: 'current',
changeHash: false,
scrollSpeed: 750,
scrollThreshold: 0.5,
filter: '',
easing: 'swing',
begin: function() {
//I get fired when the animation is starting
},
end: function() {
//I get fired when the animation is ending
},
scrollChange: function($currentListItem) {
//I get fired when you enter a section and I pass the list item of the section
}
});
</script>
<script>
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal_mem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Members text to come</h4>
</div>
<div class="modal-body">
This is where the members text is going to come...
<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="myModal_b2c" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">B2C - Supplier to Consumer - Promotions <br />
Make your sales people the HERO. </h4>
</div>
<div class="modal-body">
Allow your sales people to assist member stores with this unique co-operative promotional tool…a first of its kind. <br /><br />
Approved sales staff will assist your customers (owners or buyers) in creating joint branded promotions, thus driving your product sales through the store… while building on your relationships with the stores.<br />
<br />
You can choose to create anything from leaflets, to discount vouchers or even an SMS promotion. This DIRECT marketing approach is highly cost effective and talks directly to your target audience. You can budget and spend only.. what you want, when you want, where you want. it's that simple. <br /><br />
We can target consumers by demographics or we can extend the promotions to specific targets such as General Building Contractors, Painting Contractors and Electrical Contractors or other niche markets available. Given that we have a database of contractors contact details, promotions can be geographically profiled around each Member's store. In addition, should you choose a Knock 'n drop promotion we can also demographically specify the catchment areas you may wish to reach.<br /><br />
Currently Promotional templates on offer include Leaflets, emailers, SMS campaigns, Poster, Vouchers, Store Website Special Offers while many other items will be available for you to customise in the future.<br /><br />
Only supplier personnel who are authorised to access this site will be able to customize content on Branded templates and complete the order process. The tool is available 24/7 which allows you staff to choose, create and order the promotion even while they are on the road.<br /><br />
If you are not signed up and require access, please use the contact us via the form on this page. We will then arrange a suitable time and explain the service more fully.<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="myModal_b2b" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">B2B - Supplier to Buyer - Specials & Promos</h4>
</div>
<div class="modal-body">
CUT THROUGH the clutter and ensure you're visibly "Top Of Mind"<br /><br />
Communicate directly with store owners and buyers through our various channels, including our ALL NEW "classified's" that will feature product specials in high visibility areas frequented by buyers, and on the Member "price list" website, www.letstalkhardware.co.za<br /><br />
You can still sponsor web page banners or email newsletters, but now you can order these online from the same tool. This form of brand awareness is direct, and an effective way to get that product "Top Of Mind" with the store buyers.<br /><br />
Only Supplier Key Account Managers authorised to access this site will be able to customize content on templates provided.and complete the order process. The tool is available 24/7 which allows you staff to choose, create and order the promotion even while they are on the road. We'll even customise an approval process to meet your needs.<br /><br />
If you are not signed up and require access, please use the contact us via the form on this page.
<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>