写成html,优化html
时间: 2023-07-21 07:09:30 浏览: 48
<!DOCTYPE html>
<html>
<head>
<style>
.iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 宽高比的占比 */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<button class="page-button" data-page="1">Page 1</button>
<button class="page-button" data-page="2">Page 2</button>
<button class="page-button" data-page="3">Page 3</button>
<div class="iframe-container">
<iframe id="page1" src="page1.html"></iframe>
</div>
<div class="iframe-container">
<iframe id="page2" src="page2.html"></iframe>
</div>
<div class="iframe-container">
<iframe id="page3" src="page3.html"></iframe>
</div>
<script>
var buttons = document.getElementsByClassName('page-button');
var iframes = document.getElementsByTagName('iframe');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
var pageNumber = this.getAttribute('data-page');
showPage(pageNumber);
});
}
function showPage(pageNumber) {
for (var i = 0; i < iframes.length; i++) {
iframes[i].style.display = 'none';
}
var iframe = document.getElementById('page' + pageNumber);
if (iframe) {
iframe.style.display = 'block';
adjustIframeSize(iframe);
}
}
function adjustIframeSize(iframe) {
var container = iframe.parentNode;
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetWidth * 9 / 16; // 16:9 宽高比
iframe.style.width = containerWidth + 'px';
iframe.style.height = containerHeight + 'px';
}
</script>
</body>
</html>
在这个版本的优化后的HTML代码中,我为按钮添加了一个共同的类名`page-button`,并使用`data-page`属性来保存对应的页面编号。这样,我们可以通过使用`getElementsByClassName`方法来获取所有按钮,并使用循环为每个按钮添加点击事件监听器。当点击按钮时,会调用`showPage`函数并传入对应的页面编号。
此外,我将获取所有iframe元素的代码提取到了外部,以便多次使用。在`showPage`函数中,我们仍然会隐藏所有的iframe元素,但现在我们可以直接使用之前获取到的iframes变量。同样,`adjustIframeSize`函数也保持不变。
这些优化使得代码更具可维护性和扩展性,并提高了效率。