关于angularjs中使用路由后子锚点的链接跳转问题

前端之家收集整理的这篇文章主要介绍了关于angularjs中使用路由后子锚点的链接跳转问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<div class="col-md-9 value">
                                    <div class="tab-content">
                                        <div id="tab_1" class="tab-pane active">
                                            <div id="accordion1" class="panel-group">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_1" aria-expanded="false">
                                                                2.0.1</a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                        <div class="panel-body">
                                                            我见过上帝你信吗
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2" aria-expanded="false">
                                                                1.9.1</a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_2" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            南蛮入侵
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-success">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_3" aria-expanded="false">
                                                                1.7.2</a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_3" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            万箭齐发
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-warning">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_4" aria-expanded="false">
                                                                1.7.1 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_4" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            最好的告别,这本书不错哦
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-danger">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_5" aria-expanded="false">
                                                                1.5.3 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_5" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            没有版本更新,瞎鼓捣
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_6" aria-expanded="false">
                                                                1.5.2 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_6" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            来个大本版的更新
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_7" aria-expanded="false">
                                                                1.3.3 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_7" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            升级了,快不
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="margin-top-15" style="float: right">
                                        <ul class="pagination">
                                            <li><a href="javascript:;">Prev </a></li>
                                            <li class="active"><a href="#">1 </a></li>
                                            <li><a href="javascript:;">2 </a></li>
                                            <li><a href="javascript:;">3 </a></li>
                                            <li><a href="javascript:;">4 </a></li>
                                            <li><a href="javascript:;">5 </a></li>
                                            <li><a href="javascript:;">Next </a></li>
                                        </ul>
                                    </div>
                                </div>


大家可以看到以上代码,我这里使用了锚点,#accordion1_1到#accordion1_7 这里使的angularjs路由的时候,老是跳转到路由默认页面,如何解决呢,看以下代码,只要将

 href="#accordion1_7"前的#去掉,就可以了
<pre style="background-color: rgb(255,255,255); font-family: Consolas; font-size: 14pt;"><pre name="code" class="html"><div class="row static-info">
                                <div class="col-md-3 name">
                                    历史版本:
                                </div>
                                <div class="col-md-9 value">
                                    <div class="tab-content">
                                        <div id="tab_1" class="tab-pane active">
                                            <div id="accordion1" class="panel-group">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="accordion1_1" aria-expanded="false">
                                                                2.0.1</a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                        <div class="panel-body">
                                                            我见过上帝你信吗
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="accordion1_2" aria-expanded="false">
                                                                1.9.1</a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_2" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            南蛮入侵
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-success">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="accordion1_3" aria-expanded="false">
                                                                1.7.2</a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_3" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            万箭齐发
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-warning">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="accordion1_4" aria-expanded="false">
                                                                1.7.1 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_4" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            最好的告别,这本书不错哦
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-danger">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="accordion1_5" aria-expanded="false">
                                                                1.5.3 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_5" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            没有版本更新,瞎鼓捣
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="accordion1_6" aria-expanded="false">
                                                                1.5.2 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_6" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            来个大本版的更新
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="accordion1_7" aria-expanded="false">
                                                                1.3.3 </a>
                                                        </h4>
                                                    </div>
                                                    <div id="accordion1_7" class="panel-collapse collapse" aria-expanded="false">
                                                        <div class="panel-body">
                                                            升级了,快不
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="margin-top-15" style="float: right">
                                        <ul class="pagination">
                                            <li><a href="javascript:;">Prev </a></li>
                                            <li class="active"><a href="#">1 </a></li>
                                            <li><a href="javascript:;">2 </a></li>
                                            <li><a href="javascript:;">3 </a></li>
                                            <li><a href="javascript:;">4 </a></li>
                                            <li><a href="javascript:;">5 </a></li>
                                            <li><a href="javascript:;">Next </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

猜你在找的Angularjs相关文章