如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
怎么根据下拉菜单的值弹出不同的界面
来源：互联网
2023-03-16 19:11:55 243
怎么根据下拉菜单的值弹出不同的界面
使用html 和jquery来演示
工具/原料
- html
- jquery
方法/步骤
使用visual studio code
新建一个html文件
创建一个下拉选单
我们在下拉选单中,添加3个下拉选单项
option value="1">界面1/option>
option value="2">界面2/option>
option value="3">界面3/option>
在页面中引入jquery
如果不想下载js文件,可以引入CDN
编写jquery
根据我们选择的不同的下拉选单的值来显示不同的界面
这里为了演示我们使用不同的颜色来代表不同的界面
界面1 使用blue
界面2 使用yellow
界面3 使用gray
我们定义三个style来区别
颜色的代码如下
.blue {
background-color: lightskyblue;
}
.yellow {
background-color: yellow;
}
.gray {
background-color: gray;
}
撰写下拉选择的切换逻辑
为了便于演示,我们在下拉选单中在添加一个请选择的项目
创建一个界面框
简单的使用一个div来演示
一开始的画面效果如下
撰写下拉选单的逻辑
使用不同的颜色来代表不同的界面
script type="text/javascript">
$(function () {
$("select").on("change", function () {
console.log($(this).val());
switch ($(this).val()) {
case "1": // 界面1
$("#content p").text($("select option:selected").text());
$("#content").addClass("blue");
break;
case "2": // 界面2
$("#content p").text($("select option:selected").text());
$("#content").addClass("yellow");
break;
case "3": // 界面3
$("#content p").text($("select option:selected").text());
$("#content").addClass("gray");
break;
default:
$("#content").removeClass();
$("#content p").text("");
break;
}
});
});
/script>
接下来就看是演示
当我们选择界面1时,就会呈现蓝色框
当我们选择界面2时,就会呈现黄色框
当我们选择界面3时,就会呈现灰色框
完整的代码如下
!DOCTYPE html>
html lang="en" xmlns="http://www.w3.org/1999/xhtml">
head>
meta charset="utf-8" />
title>/title>
script src="http://code.jquery.com/jquery-2.1.1.min.js">/script>
/head>
style>
#content {
border-width: 1px;
border-style: solid;
border-color: cornflowerblue;
width: 300px;
height: 300px;
}
#content p{
text-align:center;
}
.blue {
background-color: lightskyblue;
}
.yellow {
background-color: yellow;
}
.gray {
background-color: gray;
}
/style>
body>
select>
option value="">请选择/option>
option value="1">界面1/option>
option value="2">界面2/option>
option value="3">界面3/option>
/select>
div id="content">
/
/div>
script type="text/javascript">
$(function () {
$("select").on("change", function () {
console.log($(this).val());
switch ($(this).val()) {
case "1": // 界面1
$("#content p").text($("select option:selected").text());
$("#content").addClass("blue");
break;
case "2": // 界面2
$("#content p").text($("select option:selected").text());
$("#content").addClass("yellow");
break;
case "3": // 界面3
$("#content p").text($("select option:selected").text());
$("#content").addClass("gray");
break;
default:
$("#content").removeClass();
$("#content p").text("");
break;
}
});
});
/script>
/body>
/html>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：html设置页面高度 下一篇：在js里循环数据怎么在页面上使用
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)