web链接与tab切换对应的效果
2015-10-06 15:24
295 查看
这三个地方会相对应的一至,之前实现的时候要依赖后台点击导航的时候传递个参数,但是现在可以用前端独立完成
$(function(){
var tabBox=$('#tab');
var leftChild=tabBox.find('.tab_left .slider-child');
var rightCont=tabBox.find('.tab_right .tab_right_cont');
leftChild.removeClass('active');
rightCont.hide();
var loc = location.href;
var n1 = loc.length;//地址的总长度
var n2 = loc.indexOf("=");//取得=号的位置
var nameValue = loc.substr(n2+1, n1-n2);//从=号后面的内容
var deng = loc.indexOf("?");//取得?号的位置
var name = loc.substr(deng+1, 4);//从=号后面的内容
var url = loc.substr(0, n2);
//profile==0
if(nameValue=='profile'){
nameValue=0;
leftChild.eq(nameValue).addClass('active');
rightCont.eq(nameValue).show();
}
if(nameValue=='culture'){
nameValue=1;
leftChild.eq(nameValue).addClass('active');
rightCont.eq(nameValue).show();
}
if(nameValue=='concept'){
nameValue=2;
leftChild.eq(nameValue).addClass('active');
rightCont.eq(nameValue).show();
}
if(nameValue=='partner'){
nameValue=3;
leftChild.eq(nameValue).addClass('active');
rightCont.eq(nameValue).show();
}
leftChild.on('click',function(){
var thisIndex=$(this).index();
leftChild.removeClass('active');
$(this).addClass('active');
rightCont.hide();
rightCont.eq(thisIndex).show();
if(thisIndex==0){
history.replaceState('profile', 'title', url+'=profile')
}
if(thisIndex==1){
history.replaceState('culture', 'title', url+'=culture')
}
if(thisIndex==2){
history.replaceState('concept', 'title', url+'=concept')
}
if(thisIndex==3){
history.replaceState('partner', 'title', url+'=partner')
}
});
});
相关文章推荐
- hadoop2提交到Yarn: Mapreduce执行过程分析
- 解决中文PDF 因为未嵌入字体导致在某些环境下的乱码问题
- 关于LayoutInflater的一些总结
- hibernate的session.connection被session.dowork()顶替
- codeforce 322 DIV2 ABCD
- iOS中的动画总体预览
- 微信公众平台初试
- PropertyUtils.getProperty和PropertyUtils.setProperty的用法详解
- jQuery源码分析之$.index函数
- C++成员变量的初始化顺序问题
- android studio 代码修复提示快捷键
- mysql常见问题
- 第二次博客作业
- 设计模式之单例模式
- UDP传输中文乱码、异常解决
- 剑指offer--链表中倒数第k个结点-java
- The c# version and .Net Framework
- 剑指offer:两个链表的第一个公共结点输入两个链表,找出它们的第一个公共结点。
- C# LOCK 语句
- Arduino制作温湿度计