2242次阅读
Tab切换效果

之前没接触过JavaScript,但是看了一下,入门还真是挺简单的,入门案例如下:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>Tab切换效果</title>
<script>
  window.onload = function() {
    window.alert("Hello World!");
  };
</script>
</head>
<body>
  <h1>Tab切换效果</h1>
</body>  	
check the result

JavaScript脚本一般写在script标签内,window.onload是当网页被打开加载的时候会触发的事件,我们让它等于一个函数,意思是网页打开的时候去执行这个函数。window.alert是弹框,内容就是里面的字符串啦!

那么浏览器是怎么执行这段代码的呢?首先浏览器会执行所有script标签中的代码,然后会触发一些事件,而绑定了事件监听的代码在相应事件被触发的时候就会被执行啦,不懂的话再来看个例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>Tab切换效果</title>
</head>
<body>
  <button id="btn">点我吧</button>
  <script>
    document.getElementById("btn").onclick = function() {
      window.alert("clicked");
    }
  </script>
</body>	
check the result

这个例子是点击按钮的时候能够弹出对话框。注意,这里我们用document.getElementById的方法来获取元素,其中id就是对应button中的id属性啦。这时并不是一打开网页就会弹框,因为打开网页时,我们只是给按钮的点击事件绑定了监听器,而当真正点击按钮的时候,才产生点击事件,这时候才会触发function中的代码,弹出框框。还有一点值得注意,这里的script要写在button之后,因为浏览器是顺序加载html,如果在执行script之前,没有找到对应的button,那么将不能绑定事件。

有了这个基础,再结合display,我们很容易就能做出tab切换的效果:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>Tab切换效果</title>
<style>
  .bigbox {
    width : 600px;
    height : 500px;
  }
  .tabbox {
    width : 100%;
    height : 100px;    
  }
  .tab {
    margin-left : 1%;
    margin-right : 1%;
    width : 31%;
    height : 100%;
    line-height : 100px;
    text-align : center;
    font-size : 16px;
    float : left;
    background-color : gray;
    cursor : pointer;
  }
  .tab:hover {
    background-color : yellow;
  }
  .content {
    width : 100%;
    height : 400px;
    display : none;
  }
</style>
</head>
<body>
  <div class="bigbox">
    <div class="tabbox">
      <div class="tab" id="tab1">tab1</div>
      <div class="tab" id="tab2">tab2</div>
      <div class="tab" id="tab3">tab3</div>
    </div>
    <div class="content" id="content1" style="background-color : red;">
      content1
    </div>
    <div class="content" id="content2" style="background-color : blue;">
      content2
    </div>
    <div class="content" id="content3" style="background-color : green;">
      content3
    </div>
  </div>
  <script>
    var hideAll = function() {
      document.getElementById('content1').style.display = 'none';
      document.getElementById('content2').style.display = 'none';
      document.getElementById('content3').style.display = 'none';
    };
    var tab1 = document.getElementById('tab1');
    var tab2 = document.getElementById('tab2');
    var tab3 = document.getElementById('tab3');
    tab1.onclick = function() {
      hideAll();
      document.getElementById('content1').style.display = 'block';
    };
    tab2.onclick = function() {
      hideAll();
      document.getElementById('content2').style.display = 'block';
    };
    tab3.onclick = function() {
      hideAll();
      document.getElementById('content3').style.display = 'block';
    };
    document.getElementById('content1').style.display = 'block';
  </script>
</body>	
check the result

在JavaScript里面var就是变量的意思,我们把id为tab1的div存在一个叫做tab1的变量里面,给它绑定点击事件,在点击的时候改变content的显示与非显示,就完成了tab切换。需要注意的是,我们在这里定义了一个hideAll函数,然后就可以通过hideAll()来调用它,在JavaScript中,函数也可以被看成一个变量。

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录