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行
<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导航栏跳转到其他页面或外部链接的更多相关文章
- element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- Ios导航栏返回到指定的页面
在自己的项目实现中有这样的一个需求.一般情况下我们的导航栏返回按钮,是上个页面跳转过来,点击返回按钮返回到上来界面.但是在实际需求中有的并不是这么简单的.有的界面返回是只确定的界面.所以当时自己在实现 ...
- 【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)
首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...
- jquery 使用a标签导航栏跳转页面,动态添加高亮
众所周知,使用a标签跳转之后,会刷新一次,继而这个添加的样式就会消失.那么怎么解决这一问题呢? <script> $(function () { $('.bar a').each(func ...
- oc 导航栏跳转指定界面
[self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIn ...
- OC导航栏跳转指定界面
方法一: [self.navigationController popToViewController:[self.navigationController.viewControllers objec ...
- css怎样使顶端悬浮导航栏不遮住下面一层页面内容
在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...
- 在开源UOJ的导航栏中添加新页面链接
前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...
随机推荐
- redis 入门笔记
http://www.cnblogs.com/xinysu/p/7366142.html
- Kafka学习笔记之confluent platform入门
0x00 下载 http://www.confluent.io/download,打开后,显示最新版本3.0.0,然后在右边填写信息后,点击Download下载. 之后跳转到下载页面,选择zip 或者 ...
- 02: pycharm远程linux开发和调试代码
1.1 配置远程linux主机信息 参考博客:https://www.cnblogs.com/lei0213/p/7898301.html 1) 选择Tools--Deployment--Config ...
- JavaScript中字符串的方法:charAt()、charCodeAt()、indexOf()、lastIndexOf()、substr()、slice()、substring()、search()、replace()、split()、concat()、toLowerCase()、toUpperCase()
1.字符创的创建: //1.通过new 来创建 var str = String("javascript"); //2.3.直接使用字面量进行创建 var str='html5'; ...
- centOS6.8开放防火墙端口
1.找到防火墙配置文件,/etc/sysconfig/iptables.如果是新装的linux系统,防火墙默认是被禁掉的,没有配置任何防火墙策略,所以不存在iptables.需要在控制台使用iptab ...
- CXF整合spring,在tomcat中发布webService
服务端 1.首先下载CXF的jar包 http://pan.baidu.com/s/1dFBwSRf 密码: qyax.里面自带了需要用到的spring的jar包. 或者使用maven,如下配置.不论 ...
- 没有使用Material组件
// 这个App没有使用Material组件, 如Scaffold. // 一般来说, app没有使用Scaffold的话,会有一个黑色的背景和一个默认为黑色的文本颜色. // 这个app,将背景色改 ...
- upc组队赛1 闪闪发光 【优先队列】
闪闪发光 题目描述 一所位于云南昆明的中医药本科院校--云南中医学院. 因为报考某专业的人数骤减,正面临着停招的危机. 其中有九名少女想到一条妙计--成为偶像, 只要她们成为偶像,学校的名气便会增加, ...
- 网络流24题 P2754 [CTSC1999]家园
思路 如图,建立分层图跑dinic 每次在残余网络里加边继续跑 跑到ans>=k时候的i就是答案 诶呀啊,忘记弄箭头了,最后一列是向上的箭头,不过聪明的你们应该没啥影响 代码 #include ...
- POJ-1038 Bugs Integrated, Inc. (状压+滚动数组+深搜 的动态规划)
本题的题眼很明显,N (1 <= N <= 150), M (1 <= M <= 10),摆明了是想让你用状态压缩dp. 整个思路如下:由于要填2*3或者3*2的芯片,那么就要 ...