將代碼添加到URL將通過jQuery的

調整DIV我有這樣的代碼爲例：將代碼添加到URL將通過jQuery的

<html> 
<head> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<script type="text/javascript"> 
function showonlyone(thechosenone) { 
    $('.newboxes').each(function(index) { 
      if ($(this).attr("id") == thechosenone) { 
       $(this).show(200); 
      } 
      else { 
       $(this).hide(600); 
      } 
    }); 
} 
</script> 

</head> 

<body> 

      <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
       <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a> 
      </div> 
      <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div> 


      <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
       <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a> 
      </div> 
      <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div> 

      <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
       <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a> 
      </div> 
      <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div> 

</body> 
</html>

在不同的頁面，我想有一個鏈接，將顯示事業部＃2當用戶通過單擊該外部鏈接加載頁面。我想通過增加一個散列變量的URL，例如成爲可能：domain.com/page.html#newboxes2

有人告訴我，這樣的功能是可以通過解決此玩：

$(function(){ 

    switch(window.location.hash){ 
    case '#showcontainer1': 
     $('#container1').fadeIn(); 
     break; 
    default: 
     $('#container2').fadeIn() 
     break; 
    } 

});

但是，在試圖圍繞如何將代碼添加到我自己的代碼中後，我無法使其工作。這個怎麼用？

任何援助是感激，我的編碼的知識是非常有限的，如果你選擇幫助，請詳述。

來源

2012-08-03 Henrik Petterson

使用當前的HTML結構，所有你需要做的就是這個。導航到domain.com/page.html#newboxes2將導致<div>的id爲#newboxes2將顯示。和以前一樣，默認情況下全部設置爲display:none;。您應該考慮將您的樣式從html中提取出來，並將它們全部放在頁面頂部的<style>標籤之間。您可以使用類選擇器（例如.newboxes）將相同樣式應用於特定類的所有元素。

演示：http://jsfiddle.net/eqPGW/4/

的Javascript：

$(function() { 
    var showBox = window.location.hash.indexOf('#newboxes') != -1; 
    if(showBox) { 
     $(window.location.hash).prev('.cover').hide(); 
     $(window.location.hash).show(); 
    } 
    else { 
     $('.cover').first().hide(); 
     $('.newboxes').first().show(); 
    } 

    $('.cover a').click(function(e) { 
     e.preventDefault(); 
     var $cover = $(this).closest('.cover'); 
     $cover.hide(); 
     $('.cover').not($cover).show(); 
     $('.newboxes').hide(); 
     $cover.next('.newboxes').show();    
    }); 
});

HTML/CSS：

<html> 
<head> 
    <script type="text/javascript"> 
     // PUT SCRIPT HERE 
    </script> 
    <style> 
     .newboxes { 
      border: 1px solid black; 
      background-color: #CCCCCC; 
      display: none; 
      padding: 5px; 
      width: 150px; 
     } 
     .cover { 
     border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px; 
     } 
    </style> 
</head> 

<body> 
    <div class="cover"> 
     <a id="myHeader1" href="#" >show this one only</a> 
    </div> 
    <div class="newboxes" id="newboxes1">Div #1</div> 

    <div class="cover" > 
     <a id="myHeader2" href="#" >show this one only</a> 
    </div> 
    <div class="newboxes" id="newboxes2">Div #2</div> 

    <div class='cover' > 
     <a id="myHeader3" href="#" >show this one only</a> 
    </div> 
    <div class="newboxes" id="newboxes2">Div #3</div>   

</body> 
</html>

來源

2012-08-03 21:22:45 nbrooks

這沒有奏效。我添加了這段代碼，然後嘗試了domain.com/index.html#newboxes3，但它沒有顯示newboxes3 div，你自己試過了嗎？ – 2012-08-03 21:27:41

剛剛看到您的編輯，風格完美，但我尋找的URL解決方案並沒有像建議的那樣發揮作用。對你起作用嗎？ – 2012-08-03 21:29:21

@henrik適用於我：http://jsfiddle.net/eqPGW/ – nbrooks 2012-08-03 21:30:04

這實際上是非常直接的。 URL中的「散列」是#foo位; window.location.hash僅從URL返回此位。你收到的代碼有點荒謬。哈希的默認功能是讓瀏覽器跳轉到頁面中的特定ID。如果javascript被禁用，你仍然希望它跳轉，所以你不應該在URL中使用一些像#showcontainer1這樣的任意散列，而是實際的id本身#container1。然後，你不需要switch語句，你只需直接顯示這個div。

if (window.location.hash) { 
    $(window.location.hash).show(); 
}

來源

2012-08-03 21:23:17

將代碼添加到URL將通過jQuery的

回答

相關問題