85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
|
$(function() {
|
||
|
|
// 点击切换风琴特效
|
||
|
|
let letf_w = $('.navContainer').width() - ($('.navContainer>ul>li').width() * 8);
|
||
|
|
$('.navContainer>ul>li').on('click', function() {
|
||
|
|
$('.navLeftContainer').removeClass('choose');
|
||
|
|
$(this).children('.navLeftContainer').addClass('choose');
|
||
|
|
$(this).css('width', letf_w).siblings().css('width', '50px');
|
||
|
|
});
|
||
|
|
// 第一个风琴优先处于展开状态
|
||
|
|
$('.navContainer>ul>li:first-child').css('width', letf_w);
|
||
|
|
$('.navContainer>ul>li:first-child').children('.navLeftContainer').addClass('choose');
|
||
|
|
// 主体tab切换事件
|
||
|
|
var widget = $('.tabContainer');
|
||
|
|
var tabs = widget.find('li').not('.noChoose');
|
||
|
|
var content = $('#tabContent').children('div');
|
||
|
|
|
||
|
|
// 主控tab点击切换
|
||
|
|
tabs.on('click', function(e) {
|
||
|
|
// 禁止默认事件
|
||
|
|
e.preventDefault();
|
||
|
|
var index = $(this).data('index');
|
||
|
|
// 增加&删除样式和显示隐藏内容区
|
||
|
|
tabs.removeClass('container_active');
|
||
|
|
content.removeClass('content_active');
|
||
|
|
$(this).addClass('container_active');
|
||
|
|
content.eq(index).addClass('content_active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 主体下的咨询中心的tab切换方法
|
||
|
|
var tabNav1 = $('#tab-nav1'),
|
||
|
|
tabNav2 = $('#tab-nav2'),
|
||
|
|
tabNav3 = $('#tab-nav3'),
|
||
|
|
tabNav4 = $('#tab-nav4');
|
||
|
|
var tabBtn1 = tabNav1.find('span'),
|
||
|
|
tabBtn2 = tabNav2.find('span'),
|
||
|
|
tabBtn3 = tabNav3.find('span'),
|
||
|
|
tabBtn4 = tabNav4.find('span');
|
||
|
|
var tabItem1 = $('#tab-con54').find('.tab-con-item'),
|
||
|
|
tabItem2 = $('#tab-con55').find('.tab-con-item'),
|
||
|
|
tabItem3 = $('#tab-con56').find('.tab-con-item'),
|
||
|
|
tabItem4 = $('#tab-con57').find('.tab-con-item');
|
||
|
|
// tab点击切换函数
|
||
|
|
function tabToggle(tabBtn, tabItem) {
|
||
|
|
tabBtn.on('click', function(e) {
|
||
|
|
// 禁止默认事件
|
||
|
|
e.preventDefault();
|
||
|
|
var index = $(this).data('index');
|
||
|
|
// 增加&删除样式和显示隐藏内容区
|
||
|
|
tabBtn.removeClass('current');
|
||
|
|
tabItem.hide();
|
||
|
|
$(this).addClass('current');
|
||
|
|
tabItem.eq(index).show();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// 鼠标滑动切换
|
||
|
|
function tabToggleMouser(tabBtn, tabItem) {
|
||
|
|
tabBtn.on('mouseenter', function(e) {
|
||
|
|
// 禁止默认事件
|
||
|
|
e.preventDefault();
|
||
|
|
var index = $(this).data('index');
|
||
|
|
// 增加&删除样式和显示隐藏内容区
|
||
|
|
tabBtn.removeClass('current');
|
||
|
|
tabItem.hide();
|
||
|
|
$(this).addClass('current');
|
||
|
|
tabItem.eq(index).show();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// 执行切换函数
|
||
|
|
tabToggleMouser(tabBtn1, tabItem1);
|
||
|
|
tabToggleMouser(tabBtn2, tabItem2);
|
||
|
|
tabToggleMouser(tabBtn3, tabItem3);
|
||
|
|
tabToggleMouser(tabBtn4, tabItem4);
|
||
|
|
|
||
|
|
// 底部导航切换
|
||
|
|
var tabNav4 = $('#tab-navFooter');
|
||
|
|
var tabBtn4 = tabNav4.children('div');
|
||
|
|
var tabItem4 = $('#tab-conFooter').find('.footer-tab-con-item');
|
||
|
|
tabToggle(tabBtn4, tabItem4);
|
||
|
|
|
||
|
|
// 返回顶部
|
||
|
|
$('.goTop').on('click', function() {
|
||
|
|
$("html,body").animate({ scrollTop: 0 }, 300);
|
||
|
|
});
|
||
|
|
})
|