鼠标放上去后切换
<%@ 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;
