a标签和iframe组合使用

最新推荐文章于 2024-02-19 01:12:05 发布

原创最新推荐文章于 2024-02-19 01:12:05 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用jQuery库动态更改网页中iframe源的方法，通过点击不同菜单项，可以改变iframe显示的内容，实现了页面的动态加载效果。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./jquery-1.10.2.min.js"></script>

</head>
<body>

<div>
    <p><a href="javascript:;" id="home" onclick="showPage(this,'home')" target="content">首页</a></p>
    <p><a href="javascript:;" id="menu1" onclick="showPage(this,'menu1')" target="content">菜单1</a></p>
    <p><a href="javascript:;" id="menu2" onclick="showPage(this,'menu2')" target="content">菜单2</a></p>
    <p><a href="javascript:;" id="menu3" onclick="showPage(this,'menu3')" target="content">菜单3</a></p>
</div>


<div>
    <!--iframe中的src为该页面初始加载时, 默认显示的页面地址, 以后将根据a标签的链接地址进行动态显示内容-->
    <iframe src="http://www.taobao.com" name="content" width="100%" height="500px" frameBorder="0"></iframe>
</div>


<script>
    function showPage(obj, param) {
        switch (param) {
            case 'home':
                $(obj).attr('href', 'http://www.jd.com');
                break;
            case 'menu1':
                $(obj).attr('href', 'http://www.sina.com.cn');
                break;
            case 'menu2':
                $(obj).attr('href', 'http://www.baidu.com');
                break;
            case 'menu3':
                $(obj).attr('href', 'http://www.qq.com');
                break;
        }
    }
</script>


</body>
</html>