Heim > Artikel > Web-Frontend > Blauer Tabellen-Tab-Effekt, implementiert durch JS CSS_javascript-Kenntnisse

Blauer Tabellen-Tab-Effekt, implementiert durch JS CSS_javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:37:141057Durchsuche

Das Beispiel in diesem Artikel beschreibt den von JS CSS implementierten Blue-Table-Tab-Effekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine blaue Registerkarte vom Typ JS-Tabelle. Ein Teil des Etiketteninhalts wird in einem JS-Array gespeichert. Ich persönlich halte diesen Spezialeffekt für nicht sehr sinnvoll, da die Ausgabe des Inhalts aus JS große Probleme beim Lesen verursachen wird Der Inhalt muss nur eine JS-Programmiermethode erlernen und der Code muss verbessert werden.

Schauen wir uns die Screenshots des Laufeffekts an:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-css-blue-table-style-nav-demo/

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style> 
td,a,body{font-size:9pt;color:#000000;}
.DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA}
.DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF}
.DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}
</style>
</head>
<body>
<script language="javascript"> 
var AroundInfoArray=new Array();
AroundInfoArray[0]="脚本资源";
AroundInfoArray[1]="网页技巧集";
AroundInfoArray[2]="IT资讯坊";
function ChangeFocus(obj)
{
for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++)
{
 if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj)
 {
  document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus";
  document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i];
 }else{
  document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur";
 }
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1"><tr><td width="84" valign="top">
   <table cellpadding="0" cellspacing="0" border="0" height="407" width="84" id="leftButtonTAble">
    <tr><td height="25" align="center" class="DivAround_focus" onClick="ChangeFocus(this)">脚本代码</td></tr>
    <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">网页技巧</td></tr>
    <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">IT坊</td></tr>
    <tr><td style="border-right:solid 1px #eeeeee"> </td></tr>
   </table>
  </td><td width="360">
   <table cellpadding="0" cellspacing="0" border="0" width="100%" class="DivAround_content">
    <tr><td height="406" valign="top" style="padding:4px" id="DivAroundContent">内容</td></tr>
   </table>
  </td></tr>
  </table>
  <script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Javascript-Steuerung, dynamische Änderung von Div-Attributen, Beispiel für Analysis_Javascript-KenntnisseNächster Artikel：Javascript-Steuerung, dynamische Änderung von Div-Attributen, Beispiel für Analysis_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen