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

发布网友

我来回答

3个回答

热心网友

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

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

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


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

热心网友

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

热心网友

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

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com