2015-04-04 50 views
0

這個問題涉及在引導導航欄使用片段標識符來請求目標在index.html頁面時如何導航至目標index.html文件中。 navbar包含在index.html中。導航欄也包含在導航欄中「我們的服務」下拉菜單中加載的每個單獨的* .html頁面中。自舉數據對象的片段標識符跨頁面導航

我重複一遍,每個* .html頁面都需要支持導航回到位於index.html頁面中的標識符的目標,並且這樣做應該保持目標在頁面中的位置與當可以觀察到時相同當它被加載到index.html頁面時使用navbar。重新定位失敗。

請通過加載網站[1]並選擇「關於我們」,「與我們聯繫」,「找到我們」以及「與我們合作」開始觀察,我們從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" 
\t \t data-target="#section-for-about-us" 
\t \t onclick="pageTarget('section-for-about-us')" 
      title="About Us">About Us</a><!--data-target="#section-for-about-us"--> 
    </li> 
    ... 
</ul>

出現的真正問題是如何在index.html中請求目標,並在目標位於請求目標的另一個頁面中時重新使用它的數據目標。我已經編寫了下面顯示的pageTarget(目標)函數,該函數將導航回index.html頁面。匿名函數嘗試(但失敗)重新定位位於index.html主頁中的目標部分。

沒有pageTarget(目標)功能導航完全失敗並且沒有任何操作當從導航欄中選擇關於我們時,當導航欄加載到用於嘗試導航回index.html文件的* .html文件之一。 pageTarget(目標)功能支持導航回index.html,但是目標(Aout Us)FAILS的重新渲染。

爲了澄清,該函數將導航回index.html,但不會將「關於我們」(#section-for-about-us)目標放置在與關閉我們時相同的位置當關於我們從index.html文件請求時,navbar。通常這是預期的數據目標行爲,但是重複嘗試寫出各種形式的pageTarget(目標)和匿名函數繼續失敗以產生期望的目標重定位(關於我們)。

我想要幫助重新設置有針對性的部分

爲了簡潔起見,讓我們從導航欄下拉菜單中選擇「我們的服務>建設測試」,然後選擇「關於我們」作爲解決方案(如果有的話)之後。

解釋警報...

// index.html的提醒 splitPart:包含splitPart [0],它返回一個文件名部分(沒有擴展名) 引薦:包含一個HTTP引薦 部分:包含片段標識符,例如#section-for-about-us

我建議通過以下方式瞭解警報和我嘗試解決的情況;

//加載網頁(選擇CGC標誌重新加載) http://metromilwaukee.com/cgc-test/

//選擇我們的服務>工程測試 //警報... splitPart:CGC-建設測試服務 引用:CGC-建設測試服務 部分:(仍然是空的,因爲它應該在這個步驟)

//選擇關於我們 //警報... splitParts:指數 引用:index.html的 節:#部分換約,我們(通過匿名函數填充)

注意以下關於POSITIONED我們部分〜35px低於它「希望成爲」 如何正確定位是客觀

//******************************************** 
// EXTERNAL JS CODE FOLLOWS... 
//******************************************** 
    
// EXTERNAL JS PAGETARGET FUNCTION CALLED FROM NAVBAR 
function pageTarget(target) { 
    'use-strict'; 

\t // target should contain an argument passed by navbar calling this function 
\t // target argument should be a partial fragment identifier (without hash mark) 
\t if(target.length > 0){ 
    var target = target; 
\t } 
    var referrer = document.referrer; 
     referrer = location.pathname.substring(location.pathname.lastIndexOf('/') + 1); 
\t // split off the filename extension and put the filename partial into splitPart 
    var splitPart = referrer.split("."); 

\t // splitPart[0] should contain one of the following filename partials 
\t // 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') { \t \t  
      switch (target) { 
\t \t \t  // "sections" are literally HTML <sections> located in index.html 
\t \t \t \t // which are decorated with an id attribute targeted by a data-target 
\t \t \t \t // fragement identifier referenced by anchor elements within the navbar 
       case "section-for-about-us":      
        if (target.length > 0){ 
\t \t \t \t \t  // 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;' 
\t 
    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": 
\t \t \t \t  // same sections as documented by pageTarget(target) function 
         if(section.length !== 0){ 
          switch (section) { 
           case "#section-for-about-us": 
\t \t \t \t \t \t \t  // reposition targeted section (typ) 
            $(body).css('paddingTop', '-35px'); 
            break; 
          } 
         } 
         break; 
        case "cgc-geotechnical-engineering-services": 
         $(body).css('paddingTop', '-35px'); 
\t \t \t \t \t // etc. 
         break; 
       }//switch 
      }//if (splitPart[0] !== 'index') 
     }//if (splitPart[0] === 
    }//if (referrer.length != 0) 
});//$(function()

[1] http://metromilwaukee.com/cgc-test/ navbar使用jQuery $(「#cgc-top-navbar」)。load(「cgc-top-navbar-large-screens.shtml」)加載。並且頁面跳轉,因爲index.html主頁頂部的殘缺SVG動畫頁面資源仍然佔用DOM中的空間。顯示SVG對象時,重定位問題仍然存在。

[2] index.html文件的查看源文件並搶視口維度腳本RWD

我已經做了很多計算器和谷歌上搜索研究以及寫作的非常方便和重寫的功能,但我還沒有想出如何重新定位。我希望有人能夠也會幫助解決這個問題......

回答

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>