你的位置:首页 > Java教程

[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 事件的响应有多少步骤,一个步骤一条命令。