一个页面跳转到另一个页面的导航的对应的标签下面
2015-11-26 20:52
190 查看
首先,在这里将问题仔细的描述一下:一般网页上都有导航条,导航条里面某个标签又有一个列表,如下图所示:
当进行页面间的跳转是,希望直接跳转到相对于的标签所对应的内容下面。而且简介标签下面对应的标签也是一个导航条,而且具有tab卡片切换效果,当页面进行跳转是直接定位到相应的内容。当点击了“成员介绍”标签后,效果如下图:
会直接定位到“成员介绍”标签的切换效果下。
下面来说下实现思路:
1.首先,在首页的导航条中将“简介”标签下的下拉框每栏设置一个链接
<li><ahref="introPage.html?type=teamstruct">团队结构</a></li>
<liclass="divider"></li>
<li><ahref="introPage.html?type=teamintro">团队介绍</a></li>
<liclass="divider"></li>
<li><ahref="introPage.html?type=teamculture">团队文化</a></li>
<liclass="divider"></li>
<li><ahref="introPage.html?type=teacherintro">导师介绍</a></li>
<liclass="divider"></li>
<li><ahref="introPage.html?type=memberintro">成员介绍</a></li>
</ul>2.第二、在点击下拉框中的标签后,页面就会跳到简介页面,那么我们就在页面加载的时候获取点击的下拉框中的哪一个标签。这是这个效果最核心的地方。
varurl=window.location.search;
//转换成字符串
url=url.toString();
vararray=newArray();//用来存放分分割后的字符串
array=url.split("=");
3.接下来就是在本页面的tab导航条中找到与之匹配的标签,这个就很简单了
//找到与之相等的标签,然后改变其背景颜色
for(varm=0;m<titles.length;m++){
titles[m].id=m;
if(array[1]==titles[m].className){
titles[m].style.backgroundColor="#444444";
//清除其他样式
for(varj=0;j<titles.length;j++){
divs[j].style.display="none";
}
/*divs数组是tab选项卡对应内容的数组,将其内容显示出来*/
divs[titles[m].id].style.display="block";
}
}
这样三步,就可以实现了定位。
相关文章推荐
- Django POST CSRF verification failed. Request abor
- C#常用集合的使用
- HDOJ--2089--不要62
- hdoj Immediate Decodability 1305 (字典树判断前缀)
- 就在支付宝、美团把商家搞疯的时候 百度钱包干了件对的事!
- MySql,Trim函数使用
- HTTP协议之Content-Encoding
- perl 正则或匹配
- 进击的KFC:UI(十一)自定义Cell
- 用python简单处理图片(3):添加水印
- 实例变量可见度、方法、setter、getter
- Win10 10586 更新
- Touch ID
- Android 动画浅谈(二)
- 封装button
- 如何为分类问题选择合适的机器学习算法
- android面试题(共12章,史上最全)
- TComponent与String的转换(得到控件的DFM格式的描述)
- Hibernate应用笔记 ORM实现原理和实例
- Javascript —— 有向图广度优先搜索