html下拉菜单中,如何选择不同的选项,弹出不同的内容?

如下图,下拉菜单下面是模板图片,下拉菜单的内容是模板排序,如何实现在下拉菜单中选择不同的模板,在下面图片的位置自动更换为相应的图片
最新回答
酱紫—喵

2024-11-08 00:51:17

  1. 单纯的实现效果有很多种方法。

  2. 直接跳转页面也行,下拉菜单包着a标签

  3. 下面用iframe,也行,点击的时候用js替换src


  4. <!DOCTYPE html>  
    <html>  
    <head>
    <meta charset="utf-8">  
    <title></title>
    <script src="
    http://code.jquery.com/jquery-latest.js"></script>    

    </head> 
    <style type="text/css">
    .select{width:80px;}
    </style> 
    <body>  
    <select id="select"> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
        <option>5</option> 
    </select> 
    <div class="page_title" style="height:800px;border:1px solid #000;">
            <iframe class='myIframe' src="html/redenvelope.html" scrolling="yes" frameborder="0" width="100%" height="100%" id="main_iframe"></iframe>
        </div>
      
    <script type="text/javascript">  
        $('option').on('click',function(){
            $('.myIframe').attr('src','跳转的页面.html?title="+encodeURI($(this).text()));
        });//添加点击事件替换src
    </script>  
    </body>  
    </html>
赶花期

2024-11-08 01:58:25

对下拉菜单中的选项进行点击显示,用onclick=“”,点击下拉中内容显示所需内容并将不需要的隐藏
白裙红衣

2024-11-08 03:04:43

用js改变显示的内容就行了
追问
能把代码给写一下吗   谢了