1

例として次のコードがあります。

<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>

別のページで、ユーザーがその外部リンクをクリックしてページをロードしたときにDiv #2を表示するリンクが必要です。たとえば、URLにハッシュ変数を追加することでこれを可能にしたい: domain.com/page.html#newboxes2

誰かが、これをいじることでそのような機能が可能であると私に言いました:

$(function(){

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

});

しかし、そのコードを自分のコードに追加する方法に頭を悩ませようとした後、それを機能させることができませんでした。これはどのように作動しますか？

コーディングに関する私の知識は非常に限られているため、支援する場合は詳細をお知らせください。

4

2 に答える 2

1

現在の html 構造を使用すると、これだけを行う必要があります。に移動domain.com/page.html#newboxes2すると、次に示すように<div>with 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-03T21:22:45.547 に答える
0

これは実際にはかなり簡単です。URL の「ハッシュ」は#fooビットです。window.location.hashURL からこのビットを返すだけです。ただし、受け取ったコードはちょっとばかげています。ハッシュのデフォルトの機能は、ブラウザーをページ内の特定の ID にジャンプさせることです。JavaScriptが無効になっている場合でも、ジャンプしたいので#showcontainer1、URLのように任意のハッシュを使用するのではなく、実際のID自体#container1. 次に、switch ステートメントは必要ありません。この div を直接表示するだけです。

if (window.location.hash) {
    $(window.location.hash).show();
}
于 2012-08-03T21:23:17.070 に答える