Heute hatte ich plötzlich eine Laune und dachte über eine ganz einfache Möglichkeit nach, den Tab-Effekt zu erzielen
Tatsächlich ist die Logik sehr einfach, aber im Internet ist sie grundsätzlich nicht so geschrieben
Ich weiß nicht, ob es bei der tatsächlichen Anwendung zu Problemen kommen wird, bitte geben Sie mir einen Rat
jQuery Simple Tab
*{ margin:0; padding:0;}
Körper, ul, li {
Marge:0;
Polsterung:0;
}
Körper {
Schriftart: 12px/1,5 Tahoma;
}
#außen {
Breite:450px;
Rand: 10 Pixel automatisch;
}
#tab {
Überlauf:versteckt;
Zoom:1;
Hintergrund:#000;
Rand: 1 Pixel durchgehend #000;
}
#tab li {
float:left;
Farbe:#fff;
Höhe:30px;
Cursor:Zeiger;
Zeilenhöhe:30px;
Listenstiltyp:none;
Polsterung:0 20px;
}
#tab li.current {
Farbe:#000;
Hintergrund:#ccc;
}
#Inhalt {
Rand: 1 Pixel durchgehend #000;
Border-top-width:0;
}
#content ul {
Zeilenhöhe:25px;
Anzeige:keine;
Rand:0 30px;
Polsterung:10px 0;
}
>
<script><br>
$(function(){<br>
window.onload = function()<br>
{<br>
var $li = $('#tab li');<br>
var $ul = $('#content ul');<a href="http://libs.baidu.com/jquery/1.9.0/jquery.js%22></script">
$li.click(function(){</a>
$li.removeClass();<br />
var $t = $(this).index();<br />
$(this).addClass('current');<br />
$ul.css('display','none');<br />
$ul.eq($t).css('display','block');<br />
})<br />
}<br />
});<br />
</script>%0A
%0A
%0A
%0ABilddemonstration:%20
%0A
Das Obige ist der gesamte in diesem Artikel beschriebene Inhalt. Ich hoffe, dass er Ihnen allen gefällt.