你的位置:首页 > 软件开发 > Java > 简单的选项栏设置。

简单的选项栏设置。

发布时间:2016-04-05 22:00:08
在对JavaScript进行了简单的学习后,今天利用它制作了一个简单的选择栏设置。 在进行的时候我们要先知道我们的目的是什么,如下, 我们很容易看出来,当我们鼠标进去选择栏三个标题后,我们需要得到我们要看的内容以及标题的改变。 下面进行我们的思路分析,1 ...

简单的选项栏设置。

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

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

 

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

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

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

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

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

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

 

  我把代码分享给大家:

<!DOCTYPE html>  <style>    #tupian,#junshi{  </style>       document.getElementById("xinwen").style.display = "block";/*内容显示*/
      document.getElementById("tupian").style.display = "none";
/*内容隐藏*/
      document.getElementById("x").style.backgroundColor="#ffffff";
/*颜色改变*/
      document.getElementById("x").style.borderBottom= "none";
/*底边隐藏*/
     document.getElementById("x").style.background="none";     document.getElementById("x").style.borderBottom= "1px solid gray";      document.getElementById("x").style.background = "none";      document.getElementById("x").style.borderBottom = "1px solid gray";以上代码比较简单,望大家支持。我们再进行一次总结,在进行程序操作之前,我们要明白:

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

关键词:

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

可能感兴趣文章

我的浏览记录