Boostrap导航栏跳转到其他页面或外部链接
2024-08-23 14:43:13
想要在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库工作。
自己在这上面吃过亏。
最新文章
- ASIHttpRequest 使用理解
- JS中对this的理解
- Java中的String与常量池[转帖]
- 翻译【ElasticSearch Server】第一章:开始使用ElasticSearch集群(6)
- javascript删除目标div tr 等
- 【Oracle】Windows 7下完全卸载Oracle 11g数据库
- 万维网发布服务(w3svc)已停止,除非万维网发布服务(w3svc)正在运行。
- 使用Java创建RESTful Web Service(转)
- linux杀毒软件ClamAV的安装使用
- pythond的icmp广播报获取局域网主机IP
- sqlserver等软件下载
- Huawei AP3030DN固件升级
- C# 其他的Url 文件的路径转化为二进制流
- 阿里云 搭建Git服务器
- 为网站添加favicon.ico图标
- 小猫爬山:dfs
- IE强制不使用兼容模式
- UINavigationController + UIScrollView组合,视图尺寸的设置探秘(三)
- img适配问题解决方法
- Jconsole连接Tomcat JVM