Jump to a specific page from another tab page

a.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="b.html#home">选项一</a>
	<br>
	<a href="b.html#profile">选项二</a>
	<br>
	<a href="b.html#messages">选项三</a>
	<br>
	<a href="b.html#settings">选项四</a>
</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
		<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation" name="profile2"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">.1
			<h3 class="b"></h3></div>
  <div role="tabpanel" class="tab-pane" id="profile">..2
		<h3 class="a"></h3>
	</div>
  <div role="tabpanel" class="tab-pane" id="messages">.3.</div>
  <div role="tabpanel" class="tab-pane" id="settings">.4.</div>
</div>
<script type="text/javascript">
	var hash = location.hash;//获取到跳转页面的参数
	var tab = $('.nav-tabs li');
	var con = $('.tab-content .tab-pane');
	console.log(con);
	for(var i=0;i<con.length;i++){
		var mm = con[i];
		var selectCon = "#"+ $(mm).attr('id');
		if(hash == selectCon){
			tab.siblings().removeClass('active');
			con.siblings().removeClass('active');
			$(tab[i]).addClass('active');
			$(con[i]).addClass('active');
		}
	}
	$.ajax({
    type:'post',
    url:'http://api.wangshuwen.com/getTopMovie',
    dataType: 'json',
    success:function(data){
			console.log(data.data.subjects)
      var a = data.data.subjects;
      a.forEach(function(item){
				$('.a').append(item.title)
				$('.b').append(item.year)
      })
     
    }
  })
</script>	
</body>
</html>

 

Guess you like

Origin blog.csdn.net/weixin_43868692/article/details/88551584