要iframe的檔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div p{
line-height:50px;
}
</style>
</head>
<body>
<div>
<p id="us">美國</p>
<p id="tw">台灣</p>
<p id="cn">中國</p>
<p id="jp">日本</p>
<p id="sg">新加坡</p>
<p id="uk">澳洲</p>
</div>
</body>
</html>
主頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
border:1px solid #000;
text-align:center;
border-collapse:collapse;
}
table td{
border:1px solid #000;
padding:5px;
}
iframe{
height:250px;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="us" href="#us">美國</a></td>
</tr>
<tr>
<td><a href="#tw">台灣</a></td>
</tr>
<tr>
<td><a href="#cn">中國</a></td>
</tr>
<tr>
<td><a href="#jp">日本</a></td>
</tr>
<tr>
<td><a href="#sg">新加坡</a></td>
</tr>
<tr>
<td><a href="#uk">澳洲</a></td>
</tr>
</table>
<button id="button">123</button>
<iframe src="iframe.php" id="iframe" name="iframe" width="100px" height="200px"></iframe>
<script src="../js/jquery.js"></script>
<script>
$('#iframe').on('load',function(){
var iframe = $(this)
var contents = iframe.contents();
//console.log($contents);
$('a').on('click',function(){
event.preventDefault();
iframe.attr('src','iframe.php'+$(this).attr('href'))
})
});
</script>
</body>
</html>
目前可以利用點擊控制到相應位置，但不知道該如何讓他有滑動到該位置的效果
$('#iframe').on('load',function(){
var iframe = $(this)
var contents = iframe.contents();
//console.log($contents);
$('a').on('click',function(){
event.preventDefault();
iframe.attr('src','iframe.php'+$(this).attr('href'))
})
});
已邀請的邦友 {{ invite_list.length }}/5
直接改變 iframe裡的src 可以做簡單的錨典動畫
<iframe src="iframe.php" name="iframe_a"></iframe>
<p><a href="iframe.php#US" target="iframe_a">test</a></p>
iThome鐵人賽
看影片追技術