a标签和iframe组合使用

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

hello php

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

阅读量1.7k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/shj_php/article/details/108533915

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>