从一个页面跳转到另一个页面的指定位置,并实现显示隐藏

时间:2022-11-09 13:59:47

//导航

<ul>

//显示页面

<li class="active">
<a href="javascript:;">公司简介</a>
<ul class="ulNav">
<li>
<a href="companyProfile.html#company01">公司简介</a>
</li>
<li>
<a href="companyProfile.html#company02">企业文化</a>
</li>
<li>
<a href="companyProfile.html#company03">发展历程</a>
</li>
<li>
<a href="companyProfile.html#company04">核心能力</a>
</li>
</ul>
</li>

//跳转到这个页面的指定位置

<li>
<a href="product.html">业务板块</a>
<ul class="ulNav">
<li>
<a href="product.html#product01">真空机械泵</a>
</li>
<li>
<a href="product.html#product02">Aerzen 风机</a>
</li>
<li>
<a href="product.html#product03">Olympus在线探伤</a>
</li>
<li>
<a href="product.html#product04">Regal 联轴器</a>
</li>
</ul>
</li>

</ul>

//左侧导航 显示的指定位置

<div class="container-left”>

<ul>
<li class="active" id="company01">公司简介</li>
<li id="company02">企业文化</li>
<li id="company03">发展历程</li>
<li id="company04">核心能力</li>
</ul>

</div>

//右侧显示对应内容

<div class="container-right">

<div class="row active" data-name="company01">1</div>

<div class="row active" data-name="company02">1</div>

<div class="row active" data-name="company03">1</div>

<div class="row active" data-name="company04">1</div>

</div>

js

$(function() {
var lis = $('.container-left').find('.row').find('ul');
var lisW = lis.find('li');
var h3Text = $('.row').find('.right-title').find('.rowLeftTExt');
var rowLeftSTExt = $('.row').find('.right-title').find('.rowLeftSTExt');
// var rowLeftTip = $('.row').find('.right-title').find('.rowLeftTip').text();
var leftTitle = $('.row').find('.row-title').find('.leftTitle').text();
var rowLeftSTExt1 = $('.row').find('.right-title').find('.rowLeftSTExt1');

console.log(leftTitle);
console.log(lis.length);
//左侧菜单栏点击效果
lis.on('click', 'li', function() {
//点击切换
var ind = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
var textR = $(this).parents('.container-left').siblings('.container-right').find('.row');
textR.hide().eq(ind).show();
//点击左侧菜单,右侧导航显示相应的导航栏内容
var thisText = $(this).text();
// alert(thisText);
h3Text.text(thisText);
rowLeftSTExt.text(thisText);
rowLeftSTExt1.text(leftTitle);
donghua();

})
var work02 = $('a[href$="work02"]');
console.log(work02);
work02.on('click',function(){
donghua();
})
// donghua();

var textAttr = $('.container-right').find('.row');
window.onhashchange = function() {
var navLis = $('')
var hash = window.location.hash;
console.log(hash);
if(hash) {
var textData = hash.split('#')[1];
console.log(textData);
textAttr.removeClass('active')
$('[data-name=' + textData + ']').addClass('active');
lisW.removeClass('active');
$(hash).addClass('active');
}

}; // TO
var hash = window.location.hash;
console.log(hash);
if(hash) {
var textData = hash.split('#')[1];
console.log(textData);
textAttr.removeClass('active')
$('[data-name=' + textData + ']').addClass('active');
lisW.removeClass('active');
$(hash).addClass('active');

}
if(hash=='#work02'){
donghua();
}
})

function donghua() {
var liLength = $('.logos').find('li').length;
var lis = $('.logos').find('li');
var i = 0;
var play = setInterval(function() {
lis.eq(i).show();
i++;
}, 1000);

if(i <= liLength) {
play;
} else {
clearInterval(play);
}
}