- .tr">
- <style>
- .trigger_category{
- width:1200px;
- height:30px;
- }
- ul{
- list-style:none; ;padding:0;margin:0;
- }
- ul li{
- background-color:white;
- float:left;
- height:30px;
- line-height:30px;
- text-align:center;
- border:1px solid #EEEEEE;
- overflow: hidden;
- width: 238px;
- border-bottom:none;
- cursor: pointer;
- }
- .unselected{
- /*background: url("./xxk1bg.jpg") repeat-x scroll 0 0 transparent; */
- background-color:#EBEBEB;
- color: #333333;
- }
- .toggle_tab_container{
- width:1198px;
- height:200px;
- border:1px solid #EEEEEE;
- }
- </style>
- <div class="trigger_category">
- <!--一个id=tab_trigger_***对应一个id=tab_container_***(***字符要一样)-->
- <ul class="toggle_tab_trigger tab_design" id="tab_trigger_banner">
- <li class="trigger toggle_tab_trigger_active">鲜花</li>
- <li class="trigger toggle_tab_trigger_inactive">蛋糕</li>
- <li class="trigger toggle_tab_trigger_inactive">礼篮</li>
- <li class="trigger toggle_tab_trigger_inactive">公仔</li>
- <li class="trigger toggle_tab_trigger_inactive">礼品</li>
- </ul>
- </div>
- <!--这里就是上面的内容区,id的最后一个下划线之后的字符跟上面的控制区id后面的字符一样-->
- <!--同一个页面需要多个选项卡时,修改控制区和内容区的id就行了-->
- <div class="toggle_tab_container" id="tab_container_banner">
- <div class="container toggle_tab_container_active">
- <div>这里写鲜花选项的内容</div>
- </div>
- <div class="container toggle_tab_container_inactive">
- <div>这里写蛋糕选项的内容</div>
- </div>
- <div class="container toggle_tab_container_inactive">
- <div>这里写礼篮选项的内容</div>
- </div>
- <div class="container toggle_tab_container_inactive">
- <div>这里写公仔选项的内容</div>
- </div>
- <div class="container toggle_tab_container_inactive">
- <div>这里写礼品选项的内容</div>
- </div>
- </div>
- <script src="jquery.js"></script>
- <script>
- $(document).ready(function(){
- $('.toggle_tab_trigger').children('.trigger').addClass("unselected");
- $('.toggle_tab_trigger').find('li:first').removeClass("unselected");
- $('.toggle_tab_container').find('div.container').hide();
- $('.toggle_tab_container').find('div.container:first').show();
- var selected_tab_index = new Array();
- $('.toggle_tab_trigger').children('.trigger').hover(function() {
- $(this).siblings().addClass("unselected");
- $(this).removeClass("unselected");
- var trigger_id = $(this).parent('.toggle_tab_trigger').attr('id');
- if (trigger_id == undefined) {
- return;
- }
- var this_index = $('#' + trigger_id + " .trigger").index(this);
- var tmp = trigger_id.substr(12);
- var container_id = 'tab_container_' + tmp;
- if (selected_tab_index[trigger_id] != this_index) {
- selected_tab_index[trigger_id] = this_index;
- $('#' + container_id).children('.container').CSS('display', 'none').eq(this_index).fadeIn('fast');
- $('#' + trigger_id + " .trigger").removeClass('toggle_tab_trigger_active');
- $('#' + trigger_id + " .trigger").addClass('toggle_tab_trigger_inactive');
- $(this).removeClass('toggle_tab_trigger_inactive');
- $(this).addClass('toggle_tab_trigger_active');
- }
- });
- });
- </script>
- //该片段来自于http://www.codesnippet.cn/detail/020120148356.html
来源: http://www.codesnippet.cn/detail/020120148356.html