js简单的tab选项卡效果代码

<style>

li{ list-style:none}

.test1 li{ float:left; padding-left:15px; padding-right:15px; height:25px; line-height:25px}

.test2 li{ float:left; padding-left:15px; padding-right:15px; height:25px; line-height:25px; background-position:0px -25px}

.clear{ clear:both}

</style>

<div class="test1">

<li id='tabt1' onm ouseover="tabcard(1,'1,2,3')" style=" background:#FC0">利歌网络</li>

    <li id='tabt2' onm ouseover="tabcard(2,'1,2,3')">地址</li>

    <li id='tabt3' onm ouseover="tabcard(3,'1,2,3')">电话</li>

    <div class="clear"></div>

</div>

<div class="infolist">

<ul id="tablist1">

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

    </ul>

    <ul id="tablist2" style="display:none">

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

    </ul>

    <ul id="tablist3" style="display:none">

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

    </ul>

</div>

<div class="test2">

<li id='tabt4' onclick="tabcard(4,'4,5,6')" style=" background:#FC0">aaaaa</li>

    <li id='tabt5' onclick="tabcard(5,'4,5,6')">bbbbbb</li>

    <li id='tabt6' onclick="tabcard(6,'4,5,6')">ccccc</li>

    <div class="clear"></div>

</div>

<div class="infolist">

<ul id="tablist4">

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

        <li>利歌网络</li>

    </ul>

    <ul id="tablist5" style="display:none">

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

        <li>玉田汽车站</li>

    </ul>

    <ul id="tablist6" style="display:none">

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

        <li>13513332011</li>

    </ul>

</div>

<script>

function tabcard(showno,allno){

var noarr = allno.split(","); //字符分割 

for (i=0;i<noarr.length ;i++ ) 

{ 

var tl = "tablist" +  noarr[i];

document.getElementById(tl).style.display = "none";

//下面是给标题加样式

var tabtitle = "tabt" +  noarr[i];

document.getElementById(tabtitle).style.backgroundColor = "#ffffff";

} 

var tlshow = "tablist" + showno;

document.getElementById(tlshow).style.display = "block";

//下面是给标题加样式

var tabtitleshow = "tabt" +  showno;

document.getElementById(tabtitleshow).style.backgroundColor = "#FC0";

}

</script>