JavaScript原生选项卡制作附新浪选项卡案例

总结一下通常的小选项卡的编写过程.

HTML结构代码:

	
	
		
  • 新闻
  • 首页
  • 政治
  • 时事
新闻
首页
政治
时事

我用一个大盒子包囊着一个ul以及四个div 并且给li设置独特的样式 让li刚开始时 有一个是独特的. 其余box里面的四个div 是对应上面作为按钮的li的.

CSS样式代码:

先清空所有样式的外边距以及内边距 包括所有无序列表前面的小序号. 然后给大盒子box设置宽高居中.以及边框.<以及一系列的操作/代码如上>

			/*必须要有的属性是*/
			1.#box的宽高以及溢出隐藏
			2.设置#box里面的所有div隐藏
			3.设置当点击li时起作用的样式

JavaScript代码部分:


下面是所有的代码整合



	
		
		选项卡
		
		
		
		
	
	
	
		
  • 新闻
  • 首页
  • 政治
  • 时事
新闻
首页
政治
时事


下面是新浪当下的一个选项卡效果



	
		
		新浪选项卡
		
		
	
	
		
图片
专栏
热点




                      周秦卿

你可能感兴趣的:(JavaScript)