基于JavaScript实现Tab选项卡切换效果-js教程-PHP中文网

首页

web前端

js教程

基于JavaScript实现Tab选项卡切换效果

高洛峰

Dec 05, 2016 pm 01:56 PM

javascript

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
  padding: 0;
  margin: 0;
 }
 .box {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
  margin: 100px auto;
  overflow: hidden;
 }
 ul {
  width: 600px;
  height: 40px;
  margin-left: -1px;
  list-style: none;
 }
 li {
  float: left;
  width: 101px;
  height: 40px;
  text-align: center;
  font: 600 18px/40px "simsun";
  background-color: pink;
  cursor: pointer;
 }
 span {
  display: none;
  width: 500px;
  height: 360px;
  background-color: yellow;
  text-align: center;
  font: 700 150px/360px "simsun";
 }
 .show {
  display: block;
 }
 .current {
  background-color: yellow;
 }
 </style>
 
 <script>
 window.onload = function () {
  var boxArr = document.getElementsByClassName("box");
  for(var i=0;i<boxArr.length;i++){
  fn(boxArr[i]);
  }
  function fn(ele){
  var liArr = ele.getElementsByTagName("li");
  var spanArr = ele.getElementsByTagName("span");
  for(var i=0;i<liArr.length;i++){
   liArr[i].index = i;
   liArr[i].onmouseover = function () {
   for(var j=0;j<liArr.length;j++){
    liArr[j].className = "";
    spanArr[j].className = "";
   }
   this.className = "current";
   spanArr[this.index].className = "show";
   }
  }
  }
 }
 </script>
</head>
<body>
 
 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>袜子</li>
  <li>帽子</li>
  <li>裤子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>袜子</span>
 <span>帽子</span>
 <span>裤子</span>
 <span>裙子</span>
 </div>
 
 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>袜子</li>
  <li>帽子</li>
  <li>裤子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>袜子</span>
 <span>帽子</span>
 <span>裤子</span>
 <span>裙子</span>
 </div>
 
 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>袜子</li>
  <li>帽子</li>
  <li>裤子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>袜子</span>
 <span>帽子</span>
 <span>裤子</span>
 <span>裙子</span>
 </div>
 
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。