zoukankan      html  css  js  c++  java
  • Boostrap导航栏跳转到其他页面或外部链接

    想要在boostrap下增加一个标签a,并设置其href属性来实现跳转功能(具体是想在导航栏中添加,点击某个导航栏部件时跳转至其他页面),但是发现事情并不是想象中的那么简单;

    “Bootstrap为这些a之类元素都绑定上了事件,而终止了链接默认行为。”(https://stackoverflow.com/questions/16785264/jquery-syntax-error)

    data-toggle : 标记用于触发的;
    data-dismiss:标记点击后消失;
    data-target:一般用于button标签里面,后面的参数是响应的标签对应的ID

    (https://www.jianshu.com/p/6c2f589ab1a0)

    直接加个onclick=……

    具体见下面代码2行

    1 <ul class="nav navbar-nav navbar-right">
    2      <li><a data-toggle="modal" data-target="#register" onclick="window.location.href='index1.html'"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
    3      <li><a data-toggle="modal" data-target="#login" id="loging" href=""><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
    4 </ul>

    或者使用一个js来处理

    1 <script type="text/javascript">
    2         $(function($) {
    3             // 登录点击
    4             $("#loging").click(function() {
    5                 //window.location.href = "https://www.xiami.com/collect/358371983";(跳转至外部链接)
    6                window.location.href ='index1.html';  
    7             });
    8         });
    9  </script>

    最后提醒一下:

    jquery库的引用一定要在bootstrap库之前,因为bootstrap依赖jquery库工作。

    自己在这上面吃过亏。

  • 相关阅读:
    资产采集:
    思想:
    Redis 以及 Python操作Redis
    Django在使用Mysql迁移数据库时,会报的错
    HTML
    数据库操作(四)
    数据库操作(二)
    数据库操作(三)
    数据库操作(一)
    MySQL的sql_mode模式说明及设置
  • 原文地址:https://www.cnblogs.com/Guhongying/p/10074277.html
Copyright © 2011-2022 走看看