一个页面跳转到另一个页面的导航的对应的标签下面

 

        首先,在这里将问题仔细的描述一下:一般网页上都有导航条,导航条里面某个标签又有一个列表,如下图所示:



当进行页面间的跳转是,希望直接跳转到相对于的标签所对应的内容下面。而且简介标签下面对应的标签也是一个导航条,而且具有tab卡片切换效果,当页面进行跳转是直接定位到相应的内容。当点击了“成员介绍”标签后,效果如下图:

会直接定位到“成员介绍”标签的切换效果下。



下面来说下实现思路:

1.首先,在首页的导航条中将“简介”标签下的下拉框每栏设置一个链接

<ul class="dropdown-menu">
                                    <li><a href="introPage.html?type=teamstruct">团队结构</a></li>
                                    <li class="divider"></li>
                                    <li><a href="introPage.html?type=teamintro">团队介绍</a></li>
                                    <li class="divider"></li>
                                    <li><a href="introPage.html?type=teamculture">团队文化</a></li>
                                    <li class="divider"></li>
                                    <li><a href="introPage.html?type=teacherintro">导师介绍</a></li>
                                    <li class="divider"></li>
                                    <li><a href="introPage.html?type=memberintro">成员介绍</a></li>
                                </ul>
2.第二、在点击下拉框中的标签后,页面就会跳到简介页面,那么我们就在页面加载的时候获取点击的下拉框中的哪一个标签。这是这个效果最核心的地方。

//获取地址栏中的地址
		var url=window.location.search;
		//转换成字符串
		url=url.toString();
		var array=new Array();//用来存放分分割后的字符串
		array=url.split("=");

3.接下来就是在本页面的tab导航条中找到与之匹配的标签,这个就很简单了

//这里的titles数组是tab选项卡的的标签数组,遍历数组
//找到与之相等的标签,然后改变其背景颜色
for(var m=0;m<titles.length;m++){
			titles[m].id=m;
			if(array[1] == titles[m].className){
				titles[m].style.backgroundColor="#444444";
//清除其他样式
				for (var j = 0; j < titles.length; j++) {
					divs[j].style.display = "none";
					
				}
/* divs数组是tab选项卡对应内容的数组 ,将其内容显示出来*/
				divs[titles[m].id].style.display="block";
			}
		} 

这样三步,就可以实现了定位。




  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值