此问题涉及在BootStrap导航栏中使用片段标识符在index.html页面中请求目标时如何导航到index.html文件中的目标。导航栏包含在index.html中。导航栏也包含在由＆＃34;我们的服务＆＃34;加载的每个单独的* .html页面中。导航栏中的下拉菜单。
我再说一遍，每个* .html页面都需要支持导航回到index.html页面中的标识符目标，这样做应该保持目标在页面中的位置在index.html页面中加载导航栏时使用导航栏时可以观察到的相同方式。重新定位失败。
请通过加载网站[1]并选择＆＃34;关于我们来开始观察，＆＃34; ＆＃34;联系我们，＆＃34; ＆＃34;找到我们，＆＃34;和＆＃34;与我们合作。我们在index.html中看到了所需的目标位置。 CGC徽标将重新加载页面。现在我请你忽略警报。我们要观察的是当使用导航栏片段标识符导航==在== index.html页面时，每个部分加载的页面内的位置，即目标位于页面顶部。
// Typical navbar data-target fragment identifier snippet
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#section-for-about-us"
data-target="#section-for-about-us"
onclick="pageTarget('section-for-about-us')"
title="About Us">About Us</a><!--data-target="#section-for-about-us"-->
</li>
...
</ul>
出现的真正问题是如何在index.html中请求目标并在目标位于请求目标的另一个页面中时重用其数据目标。我编写了如下所示的pageTarget（target）函数，它将导航回index.html页面。匿名函数尝试（但失败）重新定位位于index.html主页中的目标部分。
当导航栏加载到用于尝试导航回index.html文件的其中一个* .html文件中时，如果没有pageTarget（目标）功能导航FAILS完全并且当从导航栏中选择关于我们时没有任何操作。 pageTarget（目标）函数支持导航回index.html但是目标（Aout Us）FAILS的重新定位。
为了澄清，该功能将导航回index.html，但不会定位＆＃34;关于我们＆＃34; （＃section-for-about-us）当从index.html文件请求“关于我们”时，从导航栏中选择“关于我们”时，其定位方式与其自身定位方式相同。通常这是预期的数据目标行为，但是反复尝试编写各种形式的pageTarget（目标）和匿名函数继续失败以产生目标的重新定位（关于我们）。
我正在寻求帮助重新定位目标
为简洁起见，请使用＆＃34;我们的服务＆gt;施工测试＆＃34;从导航栏下拉菜单中选择＆＃34;关于我们＆＃34;作为解决方案（如果有的话）的所有进一步讨论，因为发现的任何解决方案都可以在之后复制。
解释警报......
// index.html警告 splitPart：包含splitPart [0]，返回文件名部分（无扩展名） referrer：包含HTTP Referrer section：包含片段标识符，例如＃部换约-我们
我建议以下内容了解我试图解决的警报和情况;
//加载主页（选择要重新加载的CGC徽标） http://metromilwaukee.com/cgc-test/
//选择我们的服务＆gt;施工测试 //提醒...... splitPart：cgc-construction-testing-services referrer：cgc-construction-testing-services section :(仍然是空的，因为它应该在这一步）
//选择关于我们 //提醒...... splitParts：index referrer：index.html 部分：＃section-for-about-us（由匿名函数填充）
关于美国部分的观察位置约为35xx以下，并且＃34;想要成为＆＃34; 如何正确地定位是目标
//********************************************
// EXTERNAL JS CODE FOLLOWS...
//********************************************
// EXTERNAL JS PAGETARGET FUNCTION CALLED FROM NAVBAR
function pageTarget(target) {
'use-strict';
// target should contain an argument passed by navbar calling this function
// target argument should be a partial fragment identifier (without hash mark)
if(target.length > 0){
var target = target;
}
var referrer = document.referrer;
referrer = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
// split off the filename extension and put the filename partial into splitPart
var splitPart = referrer.split(".");
// splitPart[0] should contain one of the following filename partials
// when its menu item is selected from the "Our Services" navbar dropdown
if (splitPart[0] === 'cgc-construction-testing-services' ||
splitPart[0] === 'cgc-geotechnical-engineering-services' ||
splitPart[0] === 'cgc-geotechnical-laboratory-services' ||
splitPart[0] === 'cgc-department-of-transportation-services' ||
splitPart[0] === 'cgc-projects-portfolio' ||
splitPart[0] === 'index'){
if (splitPart[0] !== 'index') {
switch (target) {
// "sections" are literally HTML <sections> located in index.html
// which are decorated with an id attribute targeted by a data-target
// fragement identifier referenced by anchor elements within the navbar
case "section-for-about-us":
if (target.length > 0){
// Navigate to #section-for-about-us target
// located within index.html (typ)
$(location).attr('href', 'index.html#' + target);
}
break;
case "section-for-contact-us":
if (target.length > 0) {
$(location).attr('href', 'index.html#' + target);
}
break;
case "section-for-find-us":
if (target.length > 0) {
$(location).attr('href', 'index.html#' + target);
}
break;
case "section-for-work-with-us":
if (target.length > 0) {
$(location).attr('href', 'index.html#' + target);
}
break;
}//switch
}//if (splitPart[0] !== 'index')
}//if (splitPart[0] ===
}//function pageTarget(target)
// EXTERNAL JS ANONYMOUS FUNCTION LOADED BY EACH PAGE LOAD...
// Anonymous function used in conjunction with pageTarget(target) function.
// This anonymous function should reposition targeted sections within the
// index.html homepage when navbar menu selections are requested from the
// navbar when it happens to be contained within a separate *.html file
// attemnpting to navigate back to the index.html homepage.
//
// This approach is necessary because pageTarget(target) loads the index.html
// homepage but the targeted section is postioned ~35px below where it "should be"
// when navbar menu selections are requested from within index.html.
$(function () {
'use-strict;'
var section = $(location).attr('hash');
var referrer = $(document).prop("referrer");
referrer = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
var splitPart = referrer.split(".");
// ALERT
// What are the object properties at this point in navigation
alert('splitPart: ' + splitPart[0] + '\n' +
'referrer: ' + referrer + '\n' +
'section: ' + section);
if (referrer.length !== 0) {
// same properties documented within pageTarget(target) function
if (splitPart[0] === 'cgc-construction-testing-services' ||
splitPart[0] === 'cgc-geotechnical-engineering-services' ||
splitPart[0] === 'cgc-geotechnical-laboratory-services' ||
splitPart[0] === 'cgc-department-of-transportation-services' ||
splitPart[0] === 'cgc-projects-portfolio' ||
splitPart[0] === 'index') {
if (splitPart[0] !== 'index') {
switch (splitPart[0]) {
case "cgc-construction-testing-services":
// same sections as documented by pageTarget(target) function
if(section.length !== 0){
switch (section) {
case "#section-for-about-us":
// reposition targeted section (typ)
$(body).css('paddingTop', '-35px');
break;
}
}
break;
case "cgc-geotechnical-engineering-services":
$(body).css('paddingTop', '-35px');
// etc.
break;
}//switch
}//if (splitPart[0] !== 'index')
}//if (splitPart[0] ===
}//if (referrer.length != 0)
});//$(function ()
[1] http://metromilwaukee.com/cgc-test/ 使用jQuery $（＆＃34; #cgc-top-navbar＆＃34;）加载导航栏.load（＆＃34; cgc-top-navbar-large-screens.shtml＆＃34;）;页面跳转，因为在index.html主页顶部有禁用的SVG动画页面资源，它继续占用DOM中的空间。显示SVG对象时，重新定位问题仍然存在。
[2]查看index.html文件的来源并抓取ViewPort Dimensions脚本非常方便RWD
我已完成了大量的stackoverflow和Google搜索研究，以及编写和重写函数，但我还没有弄清楚如何重新定位。我希望有人可以并且将帮助解决这个问题......
答案 0 :(得分：1)
// Typical navbar data-target fragment identifier snippet
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#section-for-about-us"
data-target="#section-for-about-us"
onclick="pageTarget('section-for-about-us')"
title="About Us">About Us</a><!--data-target="#section-for-about-us"-->
</li>
...
</ul>