模拟下拉框选择对应菜单的内容

来源：互联网发布：淘宝的心是怎么升级的编辑：程序博客网时间：2024/05/16 16:02
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">    body,ul,li,a,p{margin: 0;padding: 0;}    a{text-decoration: none; color: #555;font-size: 23px;}        .zn-classreport-tabs{}.zn-classreport-tabstle{font-size: 16px;    position: relative;    width: 200px;    margin: 15px 20px;    line-height: 35px;    cursor: pointer;    padding: 0px 16px;    border: 1px solid #ccc;    border-radius: 5px;}.zn-classreport-tabstle>ul{display: none;    position: absolute;    top: 36px;    left: 0;    width: 90%;    background: #fff;    padding: 10px;    border: 1px solid #ccc;}.zn-classreport-tabstle li{    float: left;    text-align: center;    width: 100%;    font-size: 14px;    margin-bottom: 4px;}.zn-classreport-tabstle li:hover,.zn-classreport-tabstle li.active{background-color: #ccc;color: #fff;}.zn-classreport-tabscnt{float: left;width: 100%;}.zn-classreport-tabsbox{margin: 10px;display: none;font-size: 16px;}.zn-classreport-tabsbox.active{display: block;}.zn-classreport-tabsbox img{width: 350px;}    </style></head><body><div class="zn-classreport-tabs">    <div class="zn-classreport-tabstle">        <span>请选择课程</span>        <input type="hidden" name="test_1" class="value" value="" />        <ul class="select">            <li value="1">蒙妮妮摄影班</li>            <li value="2">昕丽冲印班</li>            <li value="3">宝丽冲印班</li>        </ul>    </div>    <div class="zn-classreport-tabscnt">        <div class="zn-classreport-tabsbox  active">            <div class="zn-classreport-tabsbox-fl">                <img class="img " src="upload/images/u149.jpg">                <div class="text">                    <p>蒙妮妮摄影班</p>                    <p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>                </div>            </div>            <div class="zn-classreport-tabsbox-fr"></div>        </div>        <div class="zn-classreport-tabsbox ">            <div class="zn-classreport-tabsbox-fl">                <img class="img " src="upload/images/goods-index-1.jpg">                <div class="text">                    <p>昕丽冲印班</p>                    <p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>                </div>            </div>        </div>        <div class="zn-classreport-tabsbox ">            <div class="zn-classreport-tabsbox-fl">                <img class="img " src="upload/images/wifi_04.jpg">                <div class="text">                    <p>宝丽冲印班</p>                    <p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>                </div>            </div>        </div>    </div></div><script src="js/jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){//报班系列$('.zn-classreport-tabs ').each(function(){var _this = $(this);var cur_tab = false; //当前标签$(_this).find('.zn-classreport-tabstle').each(function(){var _tlethis = $(this);     var select = $(this).find('.select');     var hidden = $(this).find('.value');     var span = $(this).find('span');     $( _tlethis).click(function(){     $(select).show();     })     $(_tlethis).find('ul.select li').each(function(){     $(this).click(function(){     $(hidden).val( $(this).attr('value') );     $(select).hide();     $(span).html($(this).html());     return false;     });     });});//多标签内容处理$(_this).find('.zn-classreport-tabstle li').click(function(){if (cur_tab == this) {return true;}now_pos = $(cur_tab).index();//开始的new_pos = $(this).index();//当前的$(_this).find('.zn-classreport-tabsbox').eq(now_pos).removeClass('active');$(_this).find('.zn-classreport-tabsbox').eq(new_pos).addClass('active');$(cur_tab).removeClass('active');$(this).addClass('active');cur_tab=this;});$(_this).find('.zn-classreport-tabstle li').first().click();});});</script></body></html>
如果有更好的方式，欢迎大家一起探讨！吐舌头
0 0