tab标签

鼠标放上去后切换
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="nsd.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
h2 {
border-top: solid cornflowerblue 1px;
border-left: solid cornflowerblue 1px;
width: 50px;
height: 25px;
margin: 0;
float: left;
text-align: center;
}

        .tab-content {
            border: solid cornflowerblue 1px;
            width: 152px;
            height: 100px;
        }
        
        .tab-content div{
            display: none;
        }
        
        .selected {
            background-color: cornflowerblue;
        }
        
        .tab-content .show{
            display: block;
        }
</style>

</head>
<body>
<div class="tab-head">
<h2 class="selected">1</h2>
<h2>2</h2>
<h2>3</h2>
</div>
<div class="tab-content">
<div class="show">content1</div>
<div>content2</div>
<div>content3</div>
</div>
<script>
var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

    (function changeTab(tab) {
        for (var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].onmouseover = showTab;
        }
    })();

    function showTab() {
        for (var i = 0, len = tabs.length; i < len; i++) {
            if (tabs[i] === this) {
                tabs[i].className = 'selected';
                contents[i].className = 'show';
            } else {
                tabs[i].className = '';
                contents[i].className = '';
            }
        }
    }
</script>

</body>
</html>
鼠标点击切换:
只需找到这段代码: tabs[i].onmouseover = showTab;
然后换成onclick即可。 tabs[i].onclick = showTab;

推荐阅读更多精彩内容