شاركت هذه المقالة معك الرمز المحدد لـ JS لتنفيذ تأثير تبديل علامات التبويب البسيطة للرجوع إليه. المحتوى المحدد كما يلي
رمز تبديل علامة تبويب JS:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "generator" content = "editplus®"> <meta name = "upult" content = "" meta name = "keywords" type = "text/css" href = "base.css" media = "all"/> <style type = "text/css"> a {color: #a0b3d6 ؛}. tabs {border: 1px solid #a0b3d6 ؛ margin: 100px ؛ width: 300px ؛}. A {Background: #EAF0FD ؛ خط خط: 30px ؛ حشوة: 0 20px ؛ العرض: INLINE-LIGH White ؛ _position: Relative ؛}. Tabs-Content {padding: 20px ؛ top-top: 1px solid #a0b3d6 ؛ margin-top: -1px ؛} </style> </head> <body> <div id = "tabs"> href = "javaScript: ؛ التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا التكنولوجيا </p> الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة الحياة العمل العمل الأعمال الأعمال الأعمال الأعمال الأعمال الأعمال الأعمال الأعمال الأعمال الأعمال الأعمال العمل الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال أعمال الأعمال Works Works Works Works </p> </viv> <br/> <br/> <div id = "tabs2"> <h2> <a href = "javaScript: ؛"> 11111 </a> <a href = "javaScript: ؛"> 22222 </a> <a HREF = "JavaScript: ؛"> 33333 </a> </h2> <p> 1111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111 </p> <p> 2222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222 type = "text/javaScript" src = "tabs.js"> </script> <script type = "text/javaScript"> window.onload = function () {tabs ('tabs' ، 'click') ؛ tabs ('tabs2' ، 'mouseover') ؛} </sprict> </body> </html>TABS.JS
علامات تبويب الوظيفة (المعرف ، الزناد) {var tabsbtn = document.getElementById (id) .getElementsByTagName ('H2') [0] .getElementsByTagName ('a') ؛ var tabScontent = document.getElementById (id) .getElementsBytagname ('p') i ++) {tabsbtn [i] .index = i ؛ if (trigger == 'click') {tabsbtn [i] .onclick = function () {clearClass () ؛ this.className = 'on' ؛ showcontent (this.index) ؛}} آخر إذا (trigger == 'mouseover') {tabsbtn [i] .onmouseover = function () {clearClass () ؛ this.classname = 'on' ؛ showcontent (this.index) ؛}}} showcontent (n) {for (var i = 0 ، len = tabsbtn.length ؛ i <len ؛ i ++) {tabScontent [i] .classname = 'Hide' ؛} tabscontent [n]. i = 0 ، len = tabsbtn.length ؛BASE.CSS
charset "utf-8" ؛/*@ name: base@ function: إعادة تعيين النمط الافتراضي للمتصفح*//*منع تأثير لون الخلفية المعرفة من قبل المستخدم على صفحة الويب ، أضف للسماح للمستخدمين بتخصيص الخطوط*/html {color: black ؛ background */Body ، Div ، DL ، DT ، DD ، UL ، OL ، LI ، H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، Pre ، Code ، Form ، Fieldset ، Legend ، Inport ، Textarea ، P ، blockquote ، td ، td ، hr ، article ، article ، تفاصيل ، تفاصيل ، الشكل ، القائمة ، hgroup ، menu ، mene {margin: 0 ؛ padding: 0 ؛}/* لاحظ أن عناصر النماذج لا ترث الخط الأم*/body ، زر ، إدخال ، تحديد ، textarea {font: 12px simsun ، tahoma ، arial ، sans-serif ؛ {collapse: الانهيار ؛ تباعد الحدود: 0 ؛}/* أي خطأ ثابت: لا يرث TH-text-align*/th {text-align: inirlit ؛}/* قم بإزالة الحدود الافتراضية*/fieldet ، img {border: none ؛}/* ie6 7 8 (Q) */abbr ، اختصار {الحدود: لا شيء ؛ font-variant: normal ؛}/*contricent del style*/del {text-decoration: adder-the line ؛} ، caption ، cite ، code ، dfn ، em ، th ، var {font-font: normal ؛ {style style: none ؛}/* المحاذاة هو العامل الأكثر أهمية في المحرف ، لا تركز كل شيء*/caption ، th {text-align: left ؛}/* from yahoo ، دع العنوان يتم تخصيصه ، والتكيف مع تطبيقات نظام متعددة*/h1 ، h2 ، h3 ، h4 ، h5 ، h6 {font-size: 100 ٪ ؛ {content: '' ؛}/* unified superscript and subcript*/sub ، sup {font-size: 75 ٪ ؛ line-height: 0 ؛ الموضع: النسبية ؛ algin-align: الأساس ؛ {Text-Decoration: Underline ؛}/*لا يتم عرض الترسيح بشكل افتراضي ، مع الحفاظ على الصفحة موجزة*/ins ، A {text-decoration: none ؛}/*ie6،7 Focus Point Line إزالة*/a: focus ،*: focus {Outline: none ؛}/*clear float*/. clearfix:. {clear: كلاهما ؛ overflow: hidden ؛}. clearfix {Zoom: 1 ؛ /* لـ ie6 ie7*/}. clear {clear: clo ؛ display: block ؛ overflow: hidden ؛ quight: 0 ؛ line-height: 0 ؛ font-size: 0 ؛}/* set display and hide ، عادةً ما يستخدم لتخفيض js*/. {تعويم: يسار ؛ عرض: inline ؛}. fr {float: right ؛ display: inline ؛}ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.