大家好，
我有一个主菜单导航，其中包含指向带有锚链接的页面的辅助链接，该链接使用smoothScroll打开其下方的内容。我已经能够获得页面上的锚点链接以在选中后突出显示，并且主菜单中的辅助链接导航到正确的内容，但是如果我从主导航中选择一个辅助链接[在＆ ＃39; Betts Lake＆＃39;]锚链接图像[例如房子的形象和房屋类型的名称Crane，Heron，Peregrine，Redtail]要么没有突出显示，要么在'贝特湖＆＃34;的主菜单导航中显示次要链接上的亮点。落下。我确定我错过了一些简单但我看不到的东西。 c1992.paas2.tx.modxcloud.com/index.php?id=6
这是我的jQuery：
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$('#layoutbg a,.navnew2 ul li a').click(function(){
$('#layoutbg a').removeClass('active');
$(this).addClass('active');
});
});
</script><!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Colorado Golf Club - Betts Lake</title>
<meta name="description" content="Meta Description Placeholder">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/fonts/MyFontsWebfontsKit.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<style>
#bettsactive .options:not(:target) {display: none;}
#bettsactive .options:target {display: block; outline: none;}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="u-max-full-width" id="topheader">
<div class="container">
<div class="row">
<p id="location">Parker, Colorado | 303 840 5400 <a href="mailto:info@coloradogolfclub.com" target="_blank"><img src="assets/images/mail.png" alt="email" id="mail"></a>
</p>
</div>
</div>
</div>
<div class="u-max-full-width">
<a href="index.php?id=1" title="Colorado Golf Club Home Page" id="header">Colorado Golf Club</a>
<div class="container">
<div class="row">
<div class="nav">
<div class="twelve columns" id="bettsnav">
<ul class="topnav" id="topnav">
<li class="searchnewtop">
<form class="sisea-search-form" action="index.php?id=8" method="post" name="searchform" id="searchform">
<fieldset>
<input type="text" name="search" id="search" value="" placeholder=""/>
<button class="icon-search" type="submit"></button>
</fieldset>
</form>
</li>
<li class="navnewspace"><a href="#"> </a></li>
<li class="navnew1"><a href="index.php?id=4">CUSTOM HOME SITES</a></li>
<li class="navnew2"><a href="index.php?id=6">BETTS LAKE</a>
<ul>
<li><a href="index.php?id=6#option1">CRANE</a></li>
<li><a href="index.php?id=6#option2">REDTAIL</a></li>
<li><a href="index.php?id=6#option3">PEREGRINE</a></li>
<li><a href="index.php?id=6#option4">HERON</a></li>
</ul>
</li>
<li class="navnew3"><a href="index.php?id=5">COLORADO GOLF CLUB LIVING</a>
<ul>
<li><a href="index.php?id=5#galleryslider">IMAGE GALLERY</a></li>
<li><a href="index.php?id=5#mastermap">COMMUNITY MAP</a></li>
</ul>
</li>
<li class="navnew4"><a href="index.php?id=3">ABOUT</a>
<ul>
<li><a href="index.php?id=5#galleryslider">IMAGE GALLERY</a></li>
<li><a href="index.php?id=5#mastermap">COMMUNITY MAP</a></li>
</ul>
</li>
<li class="searchnew">
<form class="sisea-search-form" action="index.php?id=8" method="post" name="searchform" id="searchform">
<fieldset>
<input type="text" name="search" id="search" value="" placeholder=""/>
<button class="icon-search" type="submit"></button>
</fieldset>
</form>
</li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:1.1em;width:40px;height:40px;text-align:center;padding-top:10px;margin-top:-10px;" onclick="myFunction()"><b>☰</b></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="u-max-full-width" id="videotop">
<div class="row">
<div class="twelve columns" id="video">
<div id="bettsbannertop">
<img src="assets/images/betts-cover.jpg" style="width:100%;" alt="Betts Lake - Colorado Golf Club">
</div>
</div>
</div>
<div class="u-max-full-width">
<div class="container">
<div class="row">
<div class="twelve columns" id="custombodytop">
<h2>Custom Appointed Luxury Homes at Betts Lake</h2>
<p>Combine the new trend in luxury living with smaller, more efficient homes for a lock-and-leave lifestyle. Colorado Golf Club's custom-appointed homes sit on half- to one-acre lots surrounding Betts Lake. </p><p>Choose from four floor plans, all featuring comfortable main living, spacious lower levels, and outdoor rooms, decks, and patios. All within the gates of one of America's most acclaimed golf communities. <br> </p> <p>Award-winning architect Karen Keating of TKP Architects has combined all the hallmarks of fine living—richly appointed spaces for everyday life, and modern amenities for entertaining guests. A smaller footprint with numerous design configuration options allows for a luxurious yet low-maintenance lifestyle.</p> <p>Homes start at $1,080,000 and range from 2,648 to 4,308 square feet.</p>
</div>
</div>
</div>
<div class="u-max-full-width" id="bettsbodytopbottom">
</div>
</div>
<div class="container">
<div class="row">
<div class="twelve columns" id="homebody">
<h3 id="featuredprop">CHOOSE A HOME PLAN</h3>
</div>
</div>
</div>
<div class="u-max-full-width">
<div class="container" id="bettsboxes">
<div class="row">
<div class="three columns">
<span id="layoutbg" class="option1"><a href="#option1" class="smoothScroll"><img src="assets/images/crane.jpg" alt="Betts Lake Home Layout 1" style="width:100%;background-color:transparent;" /><span id="homelayout1text"><h3>Crane</h3></span><span id="homelayout1bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></a></span>
</div>
<div class="three columns">
<span id="layoutbg" class="option2"><a href="#option2" class="smoothScroll"><img src="assets/images/redtail.jpg" alt="Betts Lake Home Layout 2" style="width:100%;background-color:transparent;" /><span id="homelayout2text"><h3>Redtail</h3></span><span id="homelayout2bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></a></span>
</div>
<div class="three columns">
<span id="layoutbg" class="option3"><a href="#option3" class="smoothScroll"><img src="assets/images/peregrine.jpg" alt="Betts Lake Home Layout 3" style="width:100%;background-color:transparent;" /><span id="homelayout3text"><h3>Peregrine</h3></span><span id="homelayout3bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></a></span>
</div>
<div class="three columns">
<span id="layoutbg" class="option4"><a href="#option4" class="smoothScroll"><img src="assets/images/heron.jpg" alt="Betts Lake Home Layout 4" style="width:100%;background-color:transparent;" /><span id="homelayout4text"><h3>Heron</h3></span><span id="homelayout4bottomhover"><img src="assets/images/layout-bottom.png" style="width:100%;"><img src="assets/images/layout-bottom-hover.png" style="width:100%;"></span></a></span>
</div>
</div>
</div>
<div class="row">
<div id="bettsactive">
<div id="option1" class="options">
<span id="betts1image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts1"><h3>THE CRANE</h3>
<p>The Crane home features a dynamic floor plan that allows you to create the perfect setting for both private living and exquisite entertaining. The central entryway divides the private master suite and study from the active living areas, with beautiful views and inviting outdoor spaces. An open interior accommodates a lifetime’s worth of furniture, art and kitchenware. The lower level provides a vast entertaining space or multiple bedroom suites for friends and family. You have the flexibility to customize your home for your lifestyle. </p></span>
<span id="betts1specs"><h5>FEATURES</h5>
<p>3,582 to 4,243 square feet</p> <p>3 to 5 Bedrooms</p> <p>3 to 7 Bathrooms</p> <p>3- to 4-Car Garage</p> <p>From $1,340,000 </p></span></span>
<span id="bettslayout"><span id="betts1image2a"><img src="assets/images/crane_lower_2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts1image2b"><img src="assets/images/crane_main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end option 1 -->
<div id="option2" class="options">
<span id="betts2image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts2"><h3>THE REDTAIL</h3>
<p>The Redtail design is for those who have an appetite for alternatives and finishes. With an optional upper level and a range of configurations on the main and lower levels, this home can become the perfect empty-nester ranch, a six- or seven-bedroom home suitable for a young family, or a second home accommodating multiple couples and guest parties. A casita option allows for a guesthouse or an apartment for in-laws or grown children. Entertain with a formal dining room or enjoy the intimacy of a breakfast nook just off the kitchen. Covered and uncovered deck spaces maximize outdoor living.</p></span>
<span id="betts2specs"><h5>FEATURES</h5>
<p>3,210 to 4,456 square feet</p> <p>3 to 6 Bedrooms</p> <p>3 to 7 Bathrooms</p> <p>2- to 4-Car Garage</p> <p>From $1,190,000</p>
</span></span>
<span id="bettslayout"><span id="betts2image2a"><img src="assets/images/redtail_lower-2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts2image2b"><img src="assets/images/redtail_main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end options2 -->
<div id="option3" class="options">
<span id="betts3image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts3"><h3>THE PEREGRINE</h3>
<p>Designed for casual living, the Peregrine home opens with a dynamic entry space that showcases the open interior and outdoor rooms. Natural light streams from all directions, creating an alluring sense of space. This home is perfect for entertaining friends while allowing for serenity and privacy in the main floor master suite. The lower level offers an easy flow to the outdoors and a flexible space for incorporating entertaining areas and guest rooms.</p></span>
<span id="betts3specs"><h5>FEATURES</h5>
<p>3,482 to 3,590 square feet</p> <p>3 to 5 Bedrooms</p> <p>3 to 4 Bathrooms</p> <p>3- to 4-Car Garage</p> <p>From $1,260,000</p><p>The Peregrine offers endless choices for customizing your home, from additional bedroom suites to outdoor entertainment areas. <a href="https://c1992.paas2.tx.modxcloud.com/index.php?id=3">Contact us</a> for more information about custom features at Betts Lake. <br></p>
</span></span>
<span id="bettslayout"><span id="betts3image2a"><img src="assets/images/peregrine-lower-2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts3image2b"><img src="assets/images/peregrine-main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end option 3 -->
<div id="option4" class="options">
<span id="betts4image"><img src="assets/images/peregrine-photo-body.jpg" alt="The Crane Layout" style="width:100%;" /></span>
<span id="option1bg">
<span id="betts4"><h3>THE HERON</h3>
<p>The Heron is the most compact of the Betts Lake home designs. Efficient and well organized, this design maximizes all the interior and external spaces to create comfortable living spaces and relaxation. Windows and long, diagonal view corridors fill the interior with natural light and an expansive feel. A comfortable and private study provides space for work and reflection, and lower level finish options allow you to integrate guest rooms or entertaining spaces.</p></span>
<span id="betts4specs"><h5>FEATURES</h5>
<p>2,965 to 3,300 square feet</p><p>2 to 4 bedrooms</p><p>3 to 4 bathrooms</p><p>3- to 4-car garage</p><p>From $1,080,000</p><p>The Heron offers endless choices for customizing your home, from additional bedroom suites to outdoor entertainment areas. <a href="index.php?id=3">Contact us</a> for more information about custom features at Betts Lake. </p></span></span>
<span id="bettslayout"><span id="betts4image2a"><img src="assets/images/heron-lower-2.png" alt="The Crane Layout" style="width:100%;" /></span><span id="betts4image2b"><img src="assets/images/heron-main-2.png" alt="The Crane Layout" style="width:100%;" /></span></span>
</div> <!-- end option 4 -->
</div>
</div>
<div id="bettsseo">
<div class="container">
<div class="row">
<h4>Design Center</h4>
<p>Exceptional design is high priority at Betts Lake at Colorado Golf Club, and with our onsite design center, homeowners can plan their dream home and personalize their interiors easily and conveniently. </p><p>The design center is stocked with the most current finishes, including options for tile, carpet, hardwood, lighting, plumbing, millwork, hardware, and more. Available luxury brand names include Sub-Zero, Wolf, Tharpe, Brizo, Kohler, Glazzio and Hubbardton Forge. Our design coordinator will facilitate an easy design process with options that reflect the latest trends as well as timeless classics and impeccable quality. </p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="five columns" id="bettsbottomseo">
<h4>Lakeside Living</h4>
<p>Within the gates one of America’s most acclaimed golf communities, you’ll discover a country-club lifestyle complete with lakeside homes, meandering paths, abundant wildlife, and dramatic mountain views. Choose from four floor plans, all featuring comfortable main level living, spacious lower levels, and outdoor rooms, decks, and patios.</p>
<p> </p>
</div>
<div class="seven columns" id="bettsbottomseo">
<img src="assets/images/betts_map_160912.png" alt="Betts Lake Lot Premiums" style="width:100%;" />
</div>
</div>
</div>
<div> </div>
<div id="footer">
<div class="container">
<div class="row">
<div class="twelve columns">
<div class="social">
<ul>
<li><a href="http://www.facebook.com/" target="_blank"><img src="assets/images/facebook.png"></a></li>
<li><a href="http://www.instagram.com/" target="_blank"><img src="assets/images/instagram.png"></a></li>
<li><a href="http://ww.twitter.com/" target="_blank"><img src="assets/images/twitter.png"></a></li>
<li><a href="http://www.vimeo.com/" target="_blank"><img src="assets/images/vimeo.png"></a></li>
<li><a href="http://plus.google.com/" target="_blank"><img src="assets/images/google%2B.png"></a></li>
</ul>
</div>
<div class="policy">
<ul>
<li>Terms</li>|
<li>Privacy Policy</li>|
<li><a href="index.php?id=3">Contact</a></li>
</ul>
</div>
<p>©2016, Colorado Golf Club</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$('#layoutbg a,.navnew2 ul li a').click(function(){
$('#layoutbg a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<script>
function myFunction() {
var x = document.getElementById("topnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
非常感谢您提供的任何帮助或帮助！