星空网 > 软件开发 > Java

简单的选项栏设置。

  在对JavaScript进行了简单的学习后,今天利用它制作了一个简单的选择栏设置。

  在进行的时候我们要先知道我们的目的是什么,如下,

 

简单的选项栏设置。简单的选项栏设置。简单的选项栏设置。

  我们很容易看出来,当我们鼠标进去选择栏三个标题后,我们需要得到我们要看的内容以及标题的改变。

  下面进行我们的思路分析,

1 标题,内容能够改变的原因是鼠标进入了标题。

2 标题的改变内容有背景色和下滑栏。

3 内容的改变是因为有些隐藏了,有些显示了。

 

  我把代码分享给大家:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选项卡设置</title>

<style>
.xuanxiang{
border-top: 2px solid blue;
border-left: 1px solid gray;
border-right: 1px solid gray;
background-color: gainsboro;
width: 115px;
margin-left: 40px;
margin-bottom: 0px;
}

#tupian,#junshi{
display: none;
}
#x{
background-color: #ffffff;
}
#t,#j{
border-bottom: 1px solid gray;
}

</style>
<script>
function xinwenquyu(){

document.getElementById("xinwen").style.display = "block";

/*内容显示*/
      document.getElementById("tupian").style.display = "none";
/*内容隐藏*/

document.getElementById("junshi").style.display = "none";
/*内容显示*/


document.getElementById("x").style.backgroundColor="#ffffff";
/*颜色改变*/

document.getElementById("t").style.background="none";
/*背景隐藏*/

document.getElementById("j").style.background="none";
/*背景隐藏*/


document.getElementById("x").style.borderBottom= "none";
/*底边隐藏*/

document.getElementById("t").style.borderBottom= "1px solid gray";
/*增加底边*/

document.getElementById("j").style.borderBottom= "1px solid gray";
/*增加底边*/





}
function tupianquyu() {
document.getElementById("xinwen").style.display = "none";
document.getElementById("tupian").style.display = "block";
document.getElementById("junshi").style.display = "none";

document.getElementById("x").style.background="none";
document.getElementById("t").style.backgroundColor="#ffffff";
document.getElementById("j").style.background="none";

document.getElementById("x").style.borderBottom= "1px solid gray";
document.getElementById("t").style.borderBottom= "none";
document.getElementById("j").style.borderBottom= "1px solid gray";


}
function junshiquyu() {
document.getElementById("xinwen").style.display = "none";
document.getElementById("tupian").style.display = "none";
document.getElementById("junshi").style.display = "block";

document.getElementById("x").style.background = "none";
document.getElementById("t").style.background = "none";
document.getElementById("j").style.backgroundColor = "#ffffff";

document.getElementById("x").style.borderBottom = "1px solid gray";
document.getElementById("t").style.borderBottom = "1px solid gray";
document.getElementById("j").style.borderBottom = "none";
}
</script>
</head>
<body >
<div >
<span id="x" onmouseover="xinwenquyu()">新闻</span>
<span id="t" onmouseover="tupianquyu()">图片</span>
<span id="j" onmouseover="junshiquyu()">军事</span>
</div>
<div id="xinwen">
<ul>
<li><a href="#">新闻新闻新闻新闻</a></li>
<li><a href="#">新闻新闻新闻新闻</a></li>
<li><a href="#">新闻新闻新闻新闻</a></li>
<li><a href="#">新闻新闻新闻新闻</a></li>
</ul>
</div>
<div id="tupian">
<ul>
<li><a href="#">图片图片图片图片</a></li>
<li><a href="#">图片图片图片图片</a></li>
<li><a href="#">图片图片图片图片</a></li>
<li><a href="#">图片图片图片图片</a></li>
</ul>
</div>
<div id="junshi">
<ul>
<li><a href="#">军事军事军事军事</a></li>
<li><a href="#">军事军事军事军事</a></li>
<li><a href="#">军事军事军事军事</a></li>
<li><a href="#">军事军事军事军事</a></li>
</ul>
</div>
</body>
</html>



以上代码比较简单,望大家支持。

我们再进行一次总结,在进行程序操作之前,我们要明白:
1 事件源;
2 事件名;
3 事件的响应有多少步骤,一个步骤一条命令。

 




原标题:简单的选项栏设置。

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

VC高手:https://www.goluckyvip.com/tag/7209.html
美国开户外汇交易:https://www.goluckyvip.com/tag/72091.html
美国外汇开户:https://www.goluckyvip.com/tag/72094.html
美国开户炒股:https://www.goluckyvip.com/tag/72095.html
半年营收15亿:https://www.goluckyvip.com/tag/721.html
VC高手运营:https://www.goluckyvip.com/tag/7210.html
23点聊电商:新质生产力加速数字贸易发展 卓尔智联集团实现营收利润双增长 :https://www.kjdsnews.com/a/1836411.html
南京浦口都有什么好玩的地方 南京浦口都有什么好玩的地方推荐:https://www.vstour.cn/a/363180.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流