//導航
<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);
}
}