Bootstrap导航条的href只能用id吗?我链接其他页面跳转不了,求解答。

fanxl12 发布于 2014/03/26 12:48
阅读 8K+
收藏 1

我使用的是Bootstrap2.3的版本,我的页面上面用了一个导航条,用来跳转不同的页面,而官方的演示文档是在一个页面上面,用的是ID(href="#id"),而我的页面都是外部的,href="http://localhost:8080/brandlanding/product"来跳转的,但是这样加,就跳转不了,怎么解决这个问题呢?或者有没有其他好的解决办法,求大神回答。


导航栏 productBaseHeader.jsp,里面的代码:

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<ul class="nav nav-pills">
  <li class="active"><a href="${ctx}/fieldSetting">字段设置</a></li>
    <li><a href="${ctx}/brand">品牌</a></li>
    <li><a href="${ctx}/productModel">产品类型</a></li>
    <li><a href="${ctx}/productPosition">货品定位</a></li>
    <li><a href="${ctx}/series">系列</a></li>
    <li><a href="${ctx}/style">风格</a></li>
    <li><a href="${ctx}/year">年份</a></li>
    <li><a href="${ctx}/season">季节</a></li>
    <li><a href="${ctx}/band">波段</a></li>
    <li><a href="${ctx}/catalog">大小类</a></li>
    <li><a href="${ctx}/designer">设计师</a></li>
    <li><a href="${ctx}/sex">性别</a></li>
    <li><a href="${ctx}/color">颜色</a></li>
    <li><a href="${ctx}/size">尺码类别</a></li>
  </ul>


字段设置页,把导航栏包含进来,代码:

<body>


<div class="row-fluid marginTop">
<%@ include file="/WEB-INF/views/base/productBaseHeader.jsp"%>
</div>
<div class="row-fluid marginTop active">
<div class="span8">
<%@ include file="/WEB-INF/views/fieldSetting/fieldSettingList.jsp"%>
</div>
<div id="main" class="span4">
<c:if test="${not empty action}">
<%@ include file="/WEB-INF/views/fieldSetting/fieldSettingForm.jsp"%>
</c:if>
</div>
</div>
</body>
</html>

加载中
0
netwinder
netwinder

页面源码 发出来看看   

fanxl12
fanxl12
好的,已经贴出来了
0
顽Shi
顽Shi
用#做锚点是在页面内部寻找对应的,如果你是外部的URL而且无法跳,可能是JS插件有限制,或者你讲原来对应的点击锚点去掉.
0
缪斯的情人
缪斯的情人
可以跳转啊,href用#只是用过锚点,这也是超链接的另一个用途;你是不是有地方覆写了a标签默认事件,最好贴出代码来,这让人怎么帮你定位
fanxl12
fanxl12
我的导航栏写在一个文件中,主页面包含导航栏,然后下面又包含左右两部分,通过id的方法不在一个页面能生效吗?也没重写a标签
0
M
Mc_Fly

我这个方法是变通的方法:

1.href="http://localhost:8080/brandlanding/product&anchor=你要调整新页面的div.ID

2.在新界面中写入这个方法:

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
</script>//这个方法是获取地址栏中的变量值的

3.在新界面初始化时,写入:

var myAnchor=getURLParameter('anchor');

document.getElementById($("#"+myAnchor)).scrollIntoView(true);

4.ok大功告成,我现在就这个用,但是有个问题,就是我的界面是通过ajax生成的,如果在没生成数据之前就调整到锚点的,就没什么效果了,所以我就直接跳到页脚了。。。。




0
netwinder
netwinder

看你页面最终生成的 ${ctx}   也就是pageContext.request.contextPath是什么

不过看现有的代码  你在productBaseHeader.jsp 里面直接改 href="http://localhost:8080/brandlanding/product"  问题不大啊 

netwinder
netwinder
回复 @fanxl12 : 我没理解 active属性 不会变化?
fanxl12
fanxl12
回复 @netwinder : 全地址就是:http://localhost:8080/brandlanding/product
netwinder
netwinder
回复 @fanxl12 : 给我你 http://localhost:8080/brandlanding/product 的全地址 是http://localhost:8080/brandlanding/product/?参数名=参数吗?
fanxl12
fanxl12
跳转是ok的,关键是active属性不会发生变化。
fanxl12
fanxl12
${ctx}就是http://localhost:8080/branding,它会自动解析这个
返回顶部
顶部