使用 js/ jQuery 可以非常容易地实现可选项卡功能

发布时间：2023-09-07 14:21:21 所属栏目：教程来源：

导读：第一种方法是用原生的js代码如下：

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>简单选项卡</title>

<style type="text/css">

body,u

第一种方法是用原生的js代码如下：

代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>简单选项卡</title>

    <style type="text/css">

    body,ul,li{margin:0;padding:0;}

    body{font:12px/1.5 Tahoma;}

    #outer{width:450px;margin:10px auto;}

    #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

    #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}

    #tab li.current{color:#000;background:#ccc;}

    #content{border:1px solid #000;border-top-width:0;}

    #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}

    </style>

    <script type="text/javascript">

      window.onload = function ()

      {

          var oLi = document.getElementById("tab").getElementsByTagName("li");

          var oUl = document.getElementById("content").getElementsByTagName("ul");

          for(var i = 0; i < oLi.length; i++)

          {

              oLi[i].index = i;

              oLi[i].onmouseover = function (){

                  for(var n = 0;n < oLi.length;n++)

                  {

                      oLi[n].className = "";

                      this.className = "current";

                  }

                      for(var n = 0;n <oUl.length;n++)

                      {

                          oUl[n].style.display = "none";

                          oUl[this.index].style.display="block";

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!