This example for you to share the JS to achieve a simple tab switching effect of the specific code for your reference, the specific contents are as follows
JS Tab Switch Code:
<!doctype html>
Tabs.js
function tabs (id,trigger) {
var tabsbtn = document.getElementById (ID). getElementsByTagName (' H2 ') [0]. getElementsByTagName (' a ');
var tabscontent = document.getElementById (ID). getElementsByTagName (' P ');
for (var i = 0,len = Tabsbtn.length i < len; i++) {
tabsbtn[i].index = i;
if (trigger = = ' click ') {
Tabsbtn[i].onclick = function () {
clearclass ();
This.classname = ' on ';
Showcontent (This.index);
}
else if (trigger = = ' MouseOver ') {
tabsbtn[i].onmouseover = function () {
clearclass ();
This.classname = ' on ';
Showcontent (This.index);
}} function Showcontent (n) {for
(var i = 0,len = Tabsbtn.length i < len; i++) {
tabscontent[i].classname = ' Hide ' ;
}
Tabscontent[n].classname = ' tabs-content ';
}
function Clearclass () {for
(var i = 0,len = Tabsbtn.length i < len; i++) {
tabsbtn[i].classname = ';
}
}
Base.css
@charset "Utf-8"; * @ Name: base @ Feature: Reset browser Default Style * * Prevents users from customizing the background color to the Web page, adding allow users to customize the font */html {color:black; Background:white}/* inside and outside margins typically allow individual browsing The performance position of the style of the device is different * * body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,
blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0; /* Note that the form element does not inherit the parent font/* Body,button,input,select,textarea {font:12px Simsun,tahoma,arial,sans-serif} input,sele Ct,textarea {font-size:100%}/* Remove the margins of each table cell and make the edges overlap/Table {border-collapse:collapse; border-spacing:0}/* IE Bug fixed:th does not inherit text-align*/th {text-align:inherit}/* Remove default Border/fieldset,img {border:none;}/* IE6 7 8 (q) bug shown as Inline performance/iframe {Display:block}/* Remove Firefox under this element's border * * * abbr,acronym {border:none; Font-variant:normal}/* Consistent del sample Type */del {Text-decoration:line-through;} address,caption,cite,code,dfn,em,th,var {font-style:normal; font-weight:500
; } * * Remove the label before the list, Li Will inherit/ol,ul {List-style:none}/* Alignment is the most important factor in typesetting, don't let anything be centered/caption,th {text-align:left}/* from Yahoo, let the title be customized, adapt to multiple systems should Use */h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:500} q:before,q:after {content: ';}//* Unified superscript and subscript/Sub, sup {font
-size:75%;
line-height:0;
position:relative;
Vertical-align:baseline; sup {Top:-0.5em} sub {bottom:-0.25em}/* Let the link appear underlined in hover state/a:hover {text-decoration:underline;}/* default does not show underline , keep the page concise * * * * ins,a {text-decoration:none}/* ie6,7 focus point line Removal * * A:focus,*:focus {outline:none;}/* Clear float/*. clearfix:befor
E,.clearfix:after {content: "";
display:table; }. clearfix:after {clear:both; Overflow:hidden}. clearfix {zoom:1;/* for IE6 IE7 */} clear{Clear:both; display:blo
ck
Overflow:hidden;
height:0;
line-height:0;
font-size:0; /* Set display and hide, usually used with JS/. Hide {Display:none!important; Visibility:hidden}. Block {Display:block!important;}/*
Set inline to reduce the bugs brought by the float * * FL {float:left; Display:inline}. fr {float:right; display:inline;}
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
