从不同页面打开特定选项卡

时间:2017-06-21 07:58:14

标签: javascript jquery html tabs anchor

你能帮我解决一下我的具体问题吗?我想创建一个链接,从一个页面打开另一个页面,并启用特定的选项卡,只有JavaScript。

--------------------- PAGE 1 ---------------------

function chooseFloor(evt, oneFloor) {
  var i, tabcontent, tablinks;
  //Hide all elements with class tabcontent
  tabcontent = document.getElementsByClassName('tabcontent');
  for (i = 0; i < tabcontent.length; i++){
    tabcontent[i].style.display = 'none';
  }
	
  //Delete class form all active elements 
  tablinks = document.getElementsByClassName('tablinks');
  for (i = 0; i < tablinks.length; i++){
    tablinks[i].className = tablinks[i].className.replace(' active', '');
  }
		
  // show tab
  document.getElementById(oneFloor).style.display = 'block';
  evt.currentTarget.className += ' active';	
}
<div class="tab">
  <a id="tab1" class="tablinks" onclick="chooseFloor(event, 'One')" href="#first" >One</a>
  <a id="tab2" class="tablinks" onclick="chooseFloor(event, 'Two')" href="#second">Two</a>
  <a id="tab3" class="tablinks" onclick="chooseFloor(event, 'Three')" href="#third">Three</a>
  <a id="tab4" class="tablinks" onclick="chooseFloor(event, 'Four')" href="#fourth">Four</a>
</div>

<div class="container">    
  <div id="first" class="tabcontent">Content 1</div>
  <div id="second" class="tabcontent">Content 2</div>
  <div id="Third" class="tabcontent">Content 3</div>
  <div id="fourth" class="tabcontent">Content 4</div>
</div>

--------------------- PAGE 2 ---------------------

if (location.hash && ['#first', '#second', '#third', '#fourth'].indexOf(location.hash.toLowerCase()) > -1) {
  //function for selecting right tab?
}
<div><a href="index.html#first" >Button 1</a></div>
<div><a href="index.html#second" >Button 2</a></div>
<div><a href="index.html#third" >Button 3</a></div>
<div><a href="index.html#fourth" >Button 4</a></div>

1 个答案:

答案 0 :(得分:0)

您可以使用sessionstorage实现此目的,在第一页上使用setItem,在目标页面上使用getitem。

我希望这会有所帮助。