2017-06-11 21 views
-1

我有一個導航欄,鏈接到同一個html頁面。我試圖實現的是當點擊導航欄的字母時。我們可以直接擴大這封信。例如,通過點擊A,我們被重定向到A並且該字母被展開。我如何建立一個鏈接並擴展到相同的HTML

HTML Page

下面是代碼:

`<nav class="navbar navbar-default" style="background-color: #F8F8F8;"> 
     <div class="container"> 
      <div class="btn-toolbar"> 
    <div class="btn-group btn-group-sm"> 
    <a href="#0"><button class="btn btn-default">0-9</button></a> 
    <a href="#A"><button class="btn btn-default">A</button></a> 
    <a href="#B"><button class="btn btn-default">B</button></a> 
    <a href="#C"><button class="btn btn-default">C</button></a> 
    <a href="#D"><button class="btn btn-default">D</button></a> 
    <a href="#E"><button class="btn btn-default">E</button></a> 
    </div> 
    </div> 
</div> 
</nav> 
<div class="panel-group" name="#0" id="#0"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" style="background: none;"> 
      <h3 class="panel-title"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#0" href="#0"> 
       <strong>0-9</strong>   
      </h3> 
     </div>      
     <div id="#0" name="#0"class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <hr style="height:2px;border:none;color:#333;background-color:#333;"/> 
      </div> 
     </div> 
    </a> 

<div class="panel-group" id="#0"> 
     <div class="panel panel-default"> 
     <div class="panel-heading" style="background: none;"> 
     <h3 class="panel-title"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#A"> 
      <strong>A</strong>   
      </h3> 
     </div> 



    <div id="A" class="panel-collapse collapse"> 
     <div class="panel-body"> 
    <hr style="height:2px;border:none;color:#333;background-color:#333;" /> 
     </div></a> 
</div> 

`

回答

0

您可以添加上單擊到HREF這將最終添加類對應的信裏說一個和意志從所有其他字母中刪除課程。 更好的方法是首先從所有刪除然後添加到相應的一個。 現在這將工作,當你有** href ='#A',因爲雖然加入#A你沒有重定向到任何網頁的網址**。它只是指向與該ID的內容並向上滾動。

對於第二種情況如果您需要重定向到任何其他網址,並且只有很少的固定數量的URL。更簡單的方法是創建URL的地圖到相應的字母展開,並簡單地使用JavaScript應用類。 現在,如果不僅僅是很少修復一些網址,甚至做這個服務器端,如果你正在做整頁重新加載,或者第一個竅門上面提到的點擊將工作。 希望它會有所幫助。 快樂編碼。

相關問題