想要在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行

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

或者使用一个js来处理

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

最后提醒一下:

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

自己在这上面吃过亏。

Boostrap导航栏跳转到其他页面或外部链接的更多相关文章

  1. element-ui使用导航栏跳转路由用法

    element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...

  2. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. Ios导航栏返回到指定的页面

    在自己的项目实现中有这样的一个需求.一般情况下我们的导航栏返回按钮,是上个页面跳转过来,点击返回按钮返回到上来界面.但是在实际需求中有的并不是这么简单的.有的界面返回是只确定的界面.所以当时自己在实现 ...

  4. 【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)

    首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...

  5. jquery 使用a标签导航栏跳转页面,动态添加高亮

    众所周知,使用a标签跳转之后,会刷新一次,继而这个添加的样式就会消失.那么怎么解决这一问题呢? <script> $(function () { $('.bar a').each(func ...

  6. oc 导航栏跳转指定界面

    [self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIn ...

  7. OC导航栏跳转指定界面

    方法一: [self.navigationController popToViewController:[self.navigationController.viewControllers objec ...

  8. css怎样使顶端悬浮导航栏不遮住下面一层页面内容

    在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...

  9. 在开源UOJ的导航栏中添加新页面链接

    前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...

随机推荐

  1. Java笔记 #03# HtmlUnit爬虫

    存档留用 (= 存档留着备用) 爬的是一个开放的自动回复机器人 API 网站 http://i.itpk.cn/. 结构 大致如下: 我做的事情就是[输入文字,点击按钮,爬取内容],如上图所示. pa ...

  2. OL6.3 设置本地yum源

    仅在 Oracle Linux Server release 6.3 上测试 PS:Oracle Linux Server release 6.3仅用于测试,不能用于商业用途 [root@oracle ...

  3. 在虚拟机上安装gho、esd(wim)系统镜像文件

    gho.esd(wim)等文件不能被虚拟机识别,但如果把它们打包成iso就可以了. 另外,还需用到能在虚拟机上运行的WinPE的iso文件,本文用的是微PE. 注意:安装虚拟机提示operating ...

  4. WIN10安装和使用MySql5.6中遇到的一些问题与解决

    WIN10安装和使用MySql5.6中遇到的一些问题与解决 提示一下,安装前需要安装python环境. MySql安装缺少组件MySQL for Excel 如图(转载别人的图,自己的安装时没有截图) ...

  5. git将本地内容传送到远程仓库出现![rejected] master -> master (fetch first)错误

    问题:使用git push -u 远程库名 master 命令将本地提交的内容传到git远程库时出现错误: 命令: git push -u origin master 出现错误: To https:/ ...

  6. Linux 字符设备驱动开发基础(二)—— 编写简单 PWM 设备驱动【转】

    本文转载自:https://blog.csdn.net/zqixiao_09/article/details/50858776 版权声明:本文为博主原创文章,未经博主允许不得转载.    https: ...

  7. Cmder + Babun 打造 Windows 好用的终端工具

    Babun a windows shell you will love Babun features the following: Pre-configured Cygwin with a lot o ...

  8. tp框架中的一些疑点知识--cookie和session的配置

    不同的浏览器采用不同的方式保存Cookie. IE浏览器会在"C:\Documents and Settings\你的用户名\Cookies"文件夹下以文本文件形式保存,一个文本文 ...

  9. SpringBoot 使用validation数据校验

    后端对数据进行验证 添加包 hibernate-validator <!-- https://mvnrepository.com/artifact/org.hibernate.validator ...

  10. 【做题】codechefCOUNTARI——分块FFT

    记本题数组长度为\(n\),权值大小为\(m\). 首先,暴力显然是\(O(n^2)\)的. 先瞄一眼tag,然后发现这是FFT. 显然,问题的关键在于要满足i,j,k之间的位置关系.于是考虑分治FF ...