如何建立链接并扩展到相同的HTML

时间:2017-06-11 20:23:44

标签: html twitter-bootstrap

我有一个链接到同一个html页面的导航栏。我想要实现的是点击导航栏的字母。我们可以直接扩大这封信。例如,通过单击A,我们将被重定向到A并且字母将被展开。

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>

`

1 个答案:

答案 0 :(得分:0)

您可以将点击后添加到href,最终会将类添加到相应的字母 A ,并将从所有其他字母中删除类。 更好的方法是首先从所有删除然后添加到相应的一个。 现在当你有** href ='#A'时这会有效,因为在向网址添加#A时你没有重定向到任何网页**。它只是用内容指向内容并向上滚动到那个。

对于第二种情况,如果您需要重定向到任何其他网址,并且只有少量固定数量的网址。更简单的方法是创建URL到相应字母的地图以扩展,并使用JavaScript简单地应用类。 现在,如果不仅仅修改了多个网址,如果您正在进行整页重新加载,请执行此服务器端,否则上面提到的点击 第一个技巧将起作用。 希望它会有所帮助。 快乐编码。