tabs 

 1 <style type="text/css">
 2         .beijing{ color:Red;}
 3         .ceshi ul li
 4         {
 5             float: left; list-style: none; font-family: "宋体"; padding: 2px 6px;
 6             font-size: 12px; margin-right: 5px;border: 1px solid #990000;border-bottom: 0px;
 7             margin-bottom: 0px;cursor:pointer;
 8         }
 9         .floatleft
10         {
11             float: left;
12         }
13         .hide
14         {
15             display: none;
16         }
17         a
18         {
19             text-decoration: none;
20         }
21         .div_box
22         {
23             margin-left: 35px; clear: both; margin-top: 1px;border: 1px solid #990000;width: 225px;
24         }
25         .hover
26         {
27             background-color: #FFCCCC;color: #000000;
28         }
29         .selected
30         {
31             color: #000000;background-color: #CCFF99;
32         }
33         .img
34         {
35             margin-top: 5px;margin-right: 5px; margin-bottom: 5px;margin-left: 5px;
36         }
37 
38 <script type="text/javascript">
39         $(function () {
40             var $li = $(".ceshi ul li");
41             $li.click(function () {
42                     $(this).addClass("selected").siblings().removeClass("selected");
43                     var $index = $(this).index();
44                     $(".div_box>div").eq($index).show().siblings().hide();
45             })
46             .hover(function () { $(this).addClass("hover") }, function () { $(this).removeClass("hover") })
47         })
48     </script>
49 
50 
51 <div style="width: 800px; height: 200px; border: 1px solid #000000; margin-top: 10px;">
52         <div class="ceshi">
53             <ul>
54                 <li class="selected">珍珠奶茶</li>
55                 <li>茉莉花茶</li>
56                 <li>来一杯吧</li></ul>
57         </div><br />
58         <div class="div_box">
59             <div><img src="../images/1002_801486.jpg" class="img" /></div>
60             <div class="hide"><img src="../images/1001_800355.jpg" class="img" /></div>
61             <div class="hide"><img src="../images/1001_801093.jpg" class="img" /></div>
62         </div>
63     </div>

 

 

posted @ 2012-05-18 16:43  搂猫谁觉的鱼  阅读(134)  评论(0)    收藏  举报