日期:2014-05-16  浏览次数:20336 次

大神帮我弄个吧.
HTML code


<div class="st_call_step">
                
                                        <ul class="info_list tab_info_list">
                        <li class="info_list_select"><a href="#" onclick="return false;">下单</a></li>                    <li><a href="#" onclick="return false;">咨询</a></li>
                        <li><a href="#" onclick="return false;">投诉</a></li>
                        <li><a href="#" onclick="return false;">售后</a></li>
                    </ul>
                
                    <form class="theForm public_info"  style="position:relative;border-top:1px solid #eee;border-left:1px solid #eee;height:245px;">
                        <div class="tab_info_show">
                        qqqqqqqqqqqqqqqqqqqqqqqq
                        </div>

                        <div class="tab_info_hide">
                        222222222222222222222222222
                        </div>

                        <div class="tab_info_hide">
                        1111111111111111111
                        </div>

                        <div class="tab_info_hide">
                        3333333333333333333
                        </div>
                          
                    </form>
                
            </div>



大神帮我弄个选项卡吧.因为这个选项卡不能出现id.都是用的class 所以捣鼓了半天也没捣鼓好

------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
 ul{
list-style-type:none;
margin-left:-40px;
position:relative;
 
}
 ul li{
 padding:5px;
 float:left;
width:80px;
 position:relative;
 
 display:block;
 border-top-width: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-left-style: solid;
 border-bottom-style:none;
 margin:0px 2px 0px 0px;;
 z-index:2;
 
}
 #L1{
 background-color:#9CC;
 border-top-color: #F6C;
 border-right-color: #F6C;
 border-left-color: #F6C;
}
 #L2{
background-color:#CC9;
border-color:#309;
margin-left:1px;
}
 
 #L3{
background-color:#FF3;
border-color:#360;
}
 #L4{
background-color:#690;
border-color:#360;

  
 div{
 
width:400px;
height:220px;
position:absolute;
margin-top:28px;
z-index:1;
}
#d1{
 background-color:#9CC;
 border:1px solid #C39;
 
 }
#d2{
 background-color:#CC9;
 border:1px solid #309;
display:none;
 }
#d3{
 background-color:#FF3;
 border:1px solid #360;
 display:none;
 }
 
#d4{
 background-color:#690;
 border:1px solid #360;
 display:none;