顯示一個div並轉到錨

有沒有什麼辦法讓這個代碼的工作！我試圖顯示DIV（slidingDiv）並轉到選定的錨（＃anchor-01 +＃anchor-02 +＃anchor-03）... 此代碼讓我只能進入DIV中的第一行。那麼請你怎麼跳到確切的錨？感謝

<html> 
<head> 
<title>Test show hide tab</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    }); 
    }); 
    </script> 

    <style type="text/css"> 
     .slidingDiv { 
     background-color: #99CCFF; 
     padding:20px; 
     margin-top:10px; 
     border-bottom:5px solid #3399FF; 
     } 
     .show_hide { 
     display:none; 
     } 
    </style> 
</head> 
<body> 

<a href="#anchor-01" class="show_hide">Show/hide 01</a> -- <a href="#anchor-02" class="show_hide">Show/hide 02 </a> -- <a href="#anchor-03" class="show_hide">Show/hide 03</a> 
<hr> 

<div class="slidingDiv"> 

    <div id="anchor-01"> 
     <h2>Tite for link anchor 01</h2> 
     Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> 
     <br><br><br><br><br><br><br><br><br><br><br> 
    </div> 

    <div id="anchor-02"> 
     <h2>Tite for link anchor 02</h2> 
     Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> 
     <br><br><br><br><br><br><br><br><br><br><br> 
    </div> 

    <div id="anchor-03"> 
     <h2>Tite for link anchor 03</h2> 
     Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> 
     <br><br><br><br><br><br><br><br><br><br><br> 
    </div> 
</div> 

</body> 
</html>

來源

2016-05-31 TaghaBoy

所以你說你想讓這三個內容隨時可見，只需要滾動父級？咦？ –

在這裏你去。

https://jsfiddle.net/6zg19ap0/

您需要電子傳遞到功能，那麼您可以檢查被點擊鏈接的ID，那麼就滾動到具有類「DIV + ID」的DIV：

$('.show_hide').click(function(e){ 

    var id = e.currentTarget.id; 

    $(".slidingDiv").slideToggle(); 

    $('html,body').animate({ 
     scrollTop: $("#div"+id).offset().top}, 
    'slow'); 

});

來源

2016-05-31 18:30:23 user3683675

我非常喜歡你的代碼和想法，非常感謝你的快速啓發。 – TaghaBoy

這個小提琴演示似乎不起作用。它顯示並同時隱藏所有div。（在Chrome中測試） –

這就是它的意思，它應該顯示全部，然後動畫滾動到選定的div。 – user3683675

$(document).ready(function(){ 
 

 
    var $divs = $(".slidingDiv").children(); 
 
    
 
    $divs.hide(); /* HIDE CHILDREN INSTEAD */ 
 
    
 
    $('.show_hide').click(function(){ 
 
    var id = this.hash; 
 
    $divs.not(id).stop().slideUp(); 
 
    $(id).slideToggle(); 
 
    }); 
 

 
});

html, body{height:100%; margin:0; font:16px/20px sans-serif;} 
 

 
/* ALL YOU NEED to get started */ 
 
.slidingDiv  { background-color: #99CCFF; } 
 
.slidingDiv > div { padding:20px; }

<!-- Add #anchor-NN to the HREF of the children elements buttons too!!! --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#anchor-01" class="show_hide">Show/hide 01</a> -- 
 
<a href="#anchor-02" class="show_hide">Show/hide 02 </a> -- 
 
<a href="#anchor-03" class="show_hide">Show/hide 03</a> <hr> 
 

 
<div class="slidingDiv"> 
 

 
    <div id="anchor-01"> 
 
    <h2>1 Tite for link anchor 01</h2> 
 
    1 Fill this space with really interesting content. <a href="#anchor-01" class="show_hide">hide</a> 
 
    <br><br><br> 
 
    </div> 
 

 
    <div id="anchor-02"> 
 
    <h2>2 Tite for link anchor 02</h2> 
 
    2 Fill this space with really interesting content. <a href="#anchor-02" class="show_hide">hide</a> 
 
    <br><br><br> 
 
    </div> 
 

 
    <div id="anchor-03"> 
 
    <h2>3 Tite for link anchor 03</h2> 
 
    3 Fill this space with really interesting content. <a href="#anchor-03" class="show_hide">hide</a> 
 
    <br><br><br> 
 
    </div> 
 

 
</div>

來源

2016-05-31 17:17:08

感謝您的回答，代碼工作完美，但它只顯示目標div和我，我希望訪問者通過鼠標滾動查看其他div ......但您的想法我將在其他項目中使用它。謝謝 – TaghaBoy

這應該被標記爲正確的答案。 –

通常你會在在頁面鏈接的接收端使用<a name="anchor-01">; div ID不被視爲鏈接目標。但是，在這種情況下，由於您的目標在點擊鏈接時隱藏，因此無法提供您想要的結果。

這明確地滾動頁面到div與ID匹配的鏈接的href：

$(document).ready(function() { 
 
     $(".slidingDiv").hide(); 
 
     $('.show_hide').click(function() { 
 
     $(".slidingDiv").slideToggle(); 
 

 
     var target = $($(this).attr("href")); 
 
     if (target.length) { 
 
      $('html, body').animate({ 
 
      scrollTop: target.offset().top 
 
      }, 300); 
 
     } 
 
     }); 
 
    });

.slidingDiv { 
 
    background-color: #99CCFF; 
 
    padding: 20px; 
 
    margin-top: 10px; 
 
    border-bottom: 5px solid #3399FF; 
 
} 
 
.show_hide {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a href="#anchor-01" class="show_hide">Show/hide 01</a> -- <a href="#anchor-02" class="show_hide">Show/hide 02 </a> -- <a href="#anchor-03" class="show_hide">Show/hide 03</a> 
 
<hr> 
 

 
<div class="slidingDiv"> 
 

 
    <div id="anchor-01"> 
 
    <h2>Tite for link anchor 01</h2> 
 
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    </div> 
 

 
    <div id="anchor-02"> 
 
    <h2>Tite for link anchor 02</h2> 
 
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    </div> 
 

 
    <div id="anchor-03"> 
 
    <h2>Tite for link anchor 03</h2> 
 
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    </div> 
 
</div>

來源

2016-05-31 17:28:24

感謝你的答覆@ daniel-beck，你的代碼工作，因爲我需要它。再次感謝 – TaghaBoy

顯示一個div並轉到錨

回答

相關問題