Вкладки внутри вкладки

0

Я выполнил поиск, но, будучи полностью потерянным в веб-разработчике, я не смог найти ответ специально для моего дела.

Проверьте этот jsFiddle. У меня есть набор более крупных вкладок, затем набор суб-вкладок в штате, у каждого сотрудника есть био; на данный момент привязка суб-вкладок связана с содержимым вкладки больших вкладок. Я попробовал изменить содержимое # tabs/id соответственно для суб-вкладок, но суб-вкладка сворачивается и не поддерживается при нажатии на каждого сотрудника; с моими ограниченными знаниями, многие испытания и ошибки были претерпеваны, но не повезло. Большое спасибо за любые комментарии.

Это html:

 <script type="text/javascript">
    // <![CDATA[
    function tab(tab) {
        document.getElementById('tab1').style.display = 'none';
        document.getElementById('tab2').style.display = 'none';
        document.getElementById('tab3').style.display = 'none';
        document.getElementById('tab4').style.display = 'none';
        document.getElementById('tab5').style.display = 'none';
        document.getElementById('tab6').style.display = 'none';
        document.getElementById('li_tab1').setAttribute("class", "");
        document.getElementById('li_tab2').setAttribute("class", "");
        document.getElementById('li_tab3').setAttribute("class", "");
        document.getElementById('li_tab4').setAttribute("class", "");
        document.getElementById('li_tab5').setAttribute("class", "");
        document.getElementById('li_tab6').setAttribute("class", "");
        document.getElementById(tab).style.display = 'block';
        document.getElementById('li_' + tab).setAttribute("class", "active");
    }
    // ]]>
    </script>
    <div id="tabs">
    <ul>
        <li id="li_tab1" onclick="tab('tab1')"><a>School Sites</a>

        </li>
        <li id="li_tab2" onclick="tab('tab2')"><a>21st</a>

        </li>
        <li id="li_tab3" onclick="tab('tab3')"><a>Project Leadership</a>

        </li>
        <li id="li_tab4" onclick="tab('tab4')"><a>Site</a>

        </li>
        <li id="li_tab5" onclick="tab('tab5')"><a>Collaborative</a>

        </li>
        <li id="li_tab6" onclick="tab('tab6')"><a>Staff</a>

        </li>
    </ul>
    <div id="Content_Area">
            <div id="tab1">School site info</div>

        <div id="tab2" style="display: none;">21st</div>

        <div id="tab3" style="display: none;">Project Leadership info</div>

        <div id="tab4" style="display: none;">Site info</div>

        <div id="tab5" style="display: none;">Collaborative info</div>

        <div id="tab6" style="display: none;">
            <div id="tabs">
                <ul>
                    <li id="li_tab1" onclick="tab('tab1')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="GH" alt="" style="align: center; padding-top: 10px;" src=".jpg" /></a>

                    </li>
                    <li id="li_tab2" onclick="tab('tab2')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="AH" alt="" style="align: center; padding-top: 10px;" src=".jpg" /></a>

                    </li>
                    <li id="li_tab3" onclick="tab('tab3')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="JR" alt="" style="align: center; padding-top: 10px;" src=".jpg" /></a>

                    </li>
                    <li id="li_tab4" onclick="tab('tab4')" style="align: center; background-color: #007c8c; width: 150px; padding-left: 10px;">
<a><img title="LK" alt="" style="align: center; padding-top: 10px;" src="jpg" /></a>

                    </li>
                </ul>
                <table style="width: 642px; border-color: white; padding-left: 10px; margin-left: 9px;">
                    <tbody>
                        <tr style="align: center; background-color: #ebd000;">
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">Professor</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Principal Investigator</span>

                            </td>
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">AH</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Program Administrator</span>

                            </td>
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">JR</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Program Administrator</span>

                            </td>
                            <td style="align: center; width: 150px; border-color: white;"><span style="color: #007c8c; font-size: 10pt; font-weight: bold; line-height: 50%;">LK</span>

<span style="color: #007c8c; font-size: 10pt; line-height: 50%;">Teacher Special Programs</span>

                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="Content_Area">
                    <!------------------------------------------------------- Sub-Tab 1 ------------------------------------------------------->
                    <div id="tab1" style="display: none;">Prof info</div>
                    <!------------------------------------------------------- Sub-Tab 2 ------------------------------------------------------->
                    <div id="tab2" style="display: none;">AH info</div>
                    <!------------------------------------------------------- Sub-Tab 3 ------------------------------------------------------->
                    <div id="tab3" style="display: none;">jr info</div>
                     <!------------------------------------------------------ Sub-Tab 4 ------------------------------------------------------->
                    <div id="tab4" style="display: none;">lk info</div>
                </div>
            </div>
        </div>
    </div>
</div>

это css:

#tabs ul {
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    list-style-type: none;
}
#tabs ul li {
    display: inline-block;
    clear: none;
    float: left;
    height: 24x;
}
#tabs ul li a {
    position: relative;
    margin-top: 0px;
    display: block;
    margin-left: 1px;
    margin-bottom: 1px;
    line-height: 50px;
    padding-left: 0px;
    background: #007c8c;
    z-index: 9999;
    border: none;
    border-bottom: 0px;
    /*-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;*/
    width: 140px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}
#tabs ul li a:hover {
    top: -5px;
    background: #ebd000;
    !important;
}
#tabs #Content_Area {
    padding: 0 10px;
    clear:both;
    overflow:hidden;
    line-height:19px;
    position: relative;
    top: 20px;
    z-index: 5;
    height: relative;
    overflow: hidden;
    padding-bottom: 20px;
}
p {
    padding-left: 15px;
}
  • 0
    Где скрипка?
  • 0
    Извините, забыл обновить код, поэтому он связан со старым кодом. Обновление это прямо сейчас.
Показать ещё 5 комментариев
Теги:
tabs

2 ответа

0
Лучший ответ

Используйте ниже, я думаю, это поможет вам

Работаю здесь http://jsfiddle.net/f8UyH/

$(document).ready(function() {
  $('.Content_Area').children('div').addClass('tabPane');
  $('.Content_Area .tabPane:not(":first")').hide();
  $('#tabs li:first-child a').addClass('active');
  $('#tabs ul a').click(function(e) {
    e.preventDefault();
    $(this).parent('li').siblings().children('a').removeClass('active');
    $(this).addClass('active');
    var $target = $(this).attr('href');
    $($target).show().siblings().hide();
    if ($($target).has('div#tabs').length == true) {
      $($target).addClass('subTabs');
      $('.subTabs').find('.tabPane:first').show();
      $('.subTabs').children('#tabs').find('li a').removeClass('active');
      $('.subTabs').children('#tabs').find('li:first-child a').addClass('active');
    }
  });
});

Вам нужно будет внести небольшие изменения в ваш HTML и CSS, и это будет работать хорошо.

вы можете увидеть изменения в скрипке.

Поделиться
  • 0
    Спасибо!!! Мне понадобилось время, чтобы заставить это работать. Мне пришлось добавить JQuery на мою страницу, с помощью здесь: w3schools.com/jquery/jquery_install.asp (не могу добавить код здесь). Стыдно, мне не хватает повторений, чтобы дать вам +1
0

Я создал следующую скрипту: http://jsfiddle.net/brcaswell/9Yp8g/7/

JS

var myTabs = {
            'navItems' : null,
            'tabSections' : null,
            'hideTabSections' : function() {
                for (i=0;i < myTabs.tabSections.length;i++) {
                    myTabs.tabSections[i].style.display = 'none';
                }
            },
            'clearActiveNavItems' : function() {
                for (i=0;i < myTabs.navItems.length; i++) {
                    myTabs.navItems[i].className = myTabs.navItems[i].className.replace('active','').replace(' ','');
                }
            },
            'init' : function () {
                myTabs.navItems = document.querySelectorAll('#tab-list .tab-li');
                myTabs.tabSections = document.querySelectorAll('#content-wrapper > .tab-section');

                for (i=0;i < myTabs.navItems.length;i++) {
                    myTabs.navItems[i].addEventListener('click',function(mouseEventArg) {
                        mouseEventArg.preventDefault();
                        var targetData = mouseEventArg.target.getAttribute('data-tab-target') || mouseEventArg.target.parentElement.getAttribute('data-tab-target') || mouseEventArg.target.parentElement.parentElement.getAttribute('data-tab-target'),                        
                            elm = (mouseEventArg.target.className.indexOf('tab-li') > -1) ? mouseEventArg.target : (mouseEventArg.target.parentElement.className.indexOf('tab-li') > -1) ? mouseEventArg.target.parentElement : mouseEventArg.target.parentElement.parentElement;

                        myTabs.clearActiveNavItems();                           
                        elm.className += " active";

                        myTabs.hideTabSections();
                        document.getElementById(targetData).style.display = "block";
                    }, false);
                }
            }
        };

Примечание: AddEventListener также запускает дочерние элементы. Вот почему я добавил цель || target.parentElement || target.parentElement.parentElement часть... значение.. вы можете идти только на три уровня в глубину.

CSS

div#tab-2, div#tab-3, div#tab-4, div#tab-5, div#tab-6 {display:none;}

    div#tab-6 ul>li {text-align:center;background-color: #007c8c; width: 150px; padding-left: 10px;}
    div#tab-6 ul>li>a>img {text-align:center;padding-top: 10px;}
    div#tab-6>table {width: 642px; border-color: white; padding-left: 10px; margin-left: 9px;}
    div#tab-6>table tr {text-align: center; background-color: #ebd000;}         
    div#tab-6>table tr>td {text-align: center; width: 150px; border-color: white;}              
    div#tab-6>table tr>td span{color: #007c8c; font-size: 10pt; line-height: 1em;}
    div#tab-6>table tr>td span:first-child {font-weight:700;}

    div#staff-tab-2, div#staff-tab-3, div#staff-tab-4 {display:none;}
    .tab-li {cursor:pointer;display:block;float:left;padding:0.25em 1em;}
    .tab-li.active {background-color:white;color:block;outline:0.1em solid silver;}
    #tab-list {clear:both;display:block;position:relative;overflow:hidden;padding:0.1em 5%;width:90%;margin:0;line-height:1.5em;background-color:whitesmoke;border:0.1em outset whitesmoke;}

HTML

<body>
    <div id="tab-wrapper">
        <ul id="tab-list">
            <li class="tab-li" data-tab-target="tab-1">School Sites</li>
            <li class="tab-li" data-tab-target="tab-2">A</li>
            <li class="tab-li" data-tab-target="tab-3">Project Leadership</li>
            <li class="tab-li" data-tab-target="tab-4">UC Berkley</li>
            <li class="tab-li" data-tab-target="tab-5">Collaborative</li>
            <li class="tab-li" data-tab-target="tab-6">Staff</li>        
        </ul>
    </div>
    <div id="content-wrapper">
        <!------------------------------------------------------- Tab 1 ------------------------------------------------------->
        <div id="tab-1" class="tab-section">        
            <ul><li>[OMI] Oakland Military Institute 3877 Lusk Street Oakland, CA 94608 Phone: (510) 594-3900 Fax: (510) 597-9886 Email: [email protected] Principal: Mark Ryan, [email protected] Site Coordinator: <a href="/contact-us/staff/colette-walker/">Colette Walker</a>, [email protected]
                    <a href="http://www.oakmil.org/omiacademy/site/default.asp">http://www.oakmil.org/omiacademy/site/default.asp</a>
                </li>
                <li>[OLR] Our Lady of the Rosary 678 B Street Union City, CA 94587-2141 Phone: (510) 471-3765 Principal: Maureen Christensen, [email protected] Site Coordinator: <a href="/contact-us/staff/jill-chacon/">Jill Chacon</a>, [email protected]<
                    <a href="http://www.olrschool.com/">http://www.olrschool.com/</a>
                </li>
                <li>[SA] Saint Anthonys Catholic School 1500 E. 15TH Street Oakland, CA 94606 Phone: (510) 534-3334 Principal: Barbara Flannery Vice Principal: Marisol Preciado, [email protected] Site Coordinator: <a href="/contact-us/staff/rogelio-nevarez/">Rogelio Nevarez</a>, [email protected]
                    <a href="http://stanthonyschool.spruz.com/">http://stanthonyschool.spruz.com/</a>
                </li>
                <li>[SC] St. Cornelius Catholic School 201 28th Street Richmond, CA 94804 Phone: (510) 232-3326 Principal: Sherri Moradi, [email protected] Site Coordinator: <a href="/contact-us/staff/gregory-defabio/">Gregory Defabio</a>, [email protected]
                    <a href="http://www.stcornelius-school.org/">http://www.stcornelius-school.org/</a>
                </li>
                <li>[SE] St. Elizabeth Elementary School 1516 33rd Ave. Oakland, CA 94601 Phone: (510) 532-7392 Associate Principal: Joseph Petersen, [email protected] Site Coordinator: <a href="/contact-us/staff/utami-setiyadi/">Utami Setiyadi</a>, [email protected]
                    <a href="http://saintelizabeth.us/">http://saintelizabeth.us/</a>
                </li>
                <li>[SJ] St. Jarlath Elementary School 2634 Pleasant St. Oakland, CA 94602 Phone: (510) 532-4387 Principal: Rodney Pierre-Antoine, [email protected] Site Coordinator: <em>TBU</em>
                </li>
                <li>[SMDP] St. Martin de Porres Saint Martin de Porres - K-5 675 41st Street Oakland, CA 94609 Phone: (510) 652-2220 Saint Martin de Porres - Middle School 1630 10th Street Oakland, CA 94607 Phone: (510) 832-1757 Principal: Ann Magovern, [email protected] Site Coordinator: <a title="Amanda Corey" href="http://www.ecuc.info/contact-us/staff/nora-kenney/">Amanda Corey</a>, [email protected]
                    <a href="http://www.stmdp.org/">http://www.stmdp.org/</a>
                </li>
            </ul>
        </div>
        <!------------------------------------------------------- Tab 2 ------------------------------------------------------->
        <div id="tab-2" class="tab-section">
            <p>The 21st Century Community Learning Centers (21st Century CLCs) program supports the creation of community learning centers that provide academic enrichment opportunities during non-school hours for children, particularly students who attend high-poverty and low-performing schools. The program helps students meet state and local student standards in core academic subjects, such as reading and math; offers students a broad array of enrichment activities that can complement their regular academic programs; and offers literacy and other educational services to the families of participating children. To learn more, visit the US Department of Education <a href="http://www.ed.gov/programs/21stcclc/index.html">website</a> or visit the California Department of Education <a href="http://www.cde.ca.gov/ls/ba/cp/&quot;">website</a>.</p>
        </div>
        <!------------------------------------------------------- Tab 3 - Project Leadership ------------------------------------------------------->
        <div id="tab-3" class="tab-section">
            <strong>Project Director</strong>, Professor Glynda Hull is an expert in the field of Literacy, and has played an active role in designing and implementing the digital technology and literacy components to be implemented in ECUC. Learn more about her work and research interests <a href="http://gse.berkeley.edu/Faculty/GHull/GHull.html">here</a>.
            <strong>Program Administrator</strong>, Adrienne Herd <strong>Program Administrator</strong>, Jeeva Roche <strong>School Principals:</strong> Rodney Pierre-Antoine, St. Jarlath Elementary School Gloria Galarsa, Our Lady of the Rosary Barbara Flannery/Marisol Preciado, Saint Anthony Catholic School Mark Ryan, Oakland Military Institute Sherri Moradi, St. Cornelius Catholic School Ann Magovern, St. Martin de Porres Joseph Petersen, St. Elizabeth Elementary School
        </div>
        <!------------------------------------------------------- Tab 4 UC Berkeley------------------------------------------------------->
        <div id="tab-4" class="tab-section">
            The <a href="http://berkeley.edu">University of California, Berkeley</a> is a public university. Its fundamental missions are teaching, research, and public service. The University of California was chartered in 1868 and its flagship campus — envisioned as a "City of Learning" — was established at Berkeley, on San Francisco Bay. The UC Berkeley academic community makes key contributions to the economic and social well-being of the Bay Area, California, and the nation. UC Berkeley <a href="http://gse.berkeley.edu">Graduate School of Education (GSE)</a> will be overseeing the grant. UC Berkeley brings extensive knowledge on best practices, educational research and evaluation, and innovative curriculum and instructional materials. The vast resources available through the UC system will be leveraged to garner support from other stakeholders. Moreover, its strong emphasis on ongoing planning and continuous program improvement has aided the programs evolution to meet the needs of students and the community. Principal Investigator Glynda Hull is an expert in the field of Adolescent Literacy, and has played an active role in designing and implementing the digital technology and literacy components to be implemented in Eastbay Collaborative for Underserved Children.
        </div>
        <!------------------------------------------------------- Tab 5 Collaborative ------------------------------------------------------->
        <div id="tab-5" class="tab-section">
            UCB Graduate School of Education faculty will spearhead the Eastbay Collaborative for Underserved Children with a committed team of educational leaders (including elementary and middle school principals, teachers, and staff) who will provide access, resources, and technical support. Carefully selected CBOs with strong records of success in after-school programming and youth development will form the foundation of the day-to-day operations; and community and school partners, including local businesses, educational institutions, faith-based organizations, and elementary and middle school students and parents will provide ongoing organizational support and formative feedback to ensure success of the program. Each participating school has a local collaborative which involves school faculty, administration, students, teachers, and local community partners.
            <ul>
                <li><strong>Partner Organizations: </strong> 
                    <ul>
                        <li>The <a href="http://gse.berkeley.edu">Graduate School of Education</a> at UC Berkeley brings extensive knowledge on best practices, educational research and evaluation, and innovative curriculum and instructional materials. The vast resources available through the UC system will be leveraged to garner support from other stakeholders. moreover, its strong emphasis on ongoing planning and continuous program improvement has aided the program evolution to meet the needs of students and the community. Principal Investigator <a href="http://www.gse.berkeley.edu/faculty/GHull/GHull.html">Professor Glynda Hull</a> is an expert in the field of Adolescent Literacy, and has played an active role in designing and implementing the digital technology and literacy components to be implemented in the program.</li>
                        <li><a href="http://www.prescottjoseph.org/">The Prescott-Joseph Center for Community Enhancement</a> (PJCCE) has been an integral player in improving low-income Oakland communities for over ten years, and has successfully served as the fiscal intermediary for the UCB and PJCCE sponsered afterschool programs for the last two years. Currently they are responsible for managing a portfolio of programs through contracts for Alameda County and private foundations that serve youth and families with health, recreation, arts, tutoring, and other literacy activities. The <a href="http://www.eastbayconsortium.org/">East Bay Consortium</a> was established in 1978 as part of the California Student Opportunity and Access Program (Cal-SOAP). It was founded to develop and improve educational opportunities for students in the East Bay. EBC goal is to provide these opportunities by developing student and parent programs, improving teacher instruction in mathematics and language arts, providing opportunities for college students to explore teaching as a career, and working in conjunction with other educational programs, improving teacher instruction in mathematics and language arts, providing opportunities for college students to explore teaching as a career and working in conjunction with other educational programs who share similar goals. Since 1988, in addition to providing a variety of college information service, the EBC has offered successful high quality academic enrichment programs for urban and mostly underserved youth. A critical component of the Consortium work is the empowerment and innovative training of teachers.</li>
                        <li><a href="http://public.ousd.k12.ca.us/">Oakland Unified School District</a></li>
                        <li>The City of <a href="http://www.oaklandnet.com/Parks/">Oakland Parks and Recreation</a> (OPR) offers a wide range of recreation, leisurely activities, cultural, educational and environmental programs and activities in East, West and Central Oakland ~ with something for everyone. OPR is responsible for 2,500 acres of open space, 100 parks and public grounds, 25 recreation, community and interpretive centers, not to mention a variety of innovative and instrumental programs spanning city-wide.</li>
                        <li><a href="http://www.bacr.org/">Bay Area Community Resources</a> promotes the healthy development of individuals, families and communities through direct services, volunteerism and partnerships in the San Francisco Bay Area. The <a href="http://www.acoe.org/acoe/">Alameda County Office of Education</a> Alameda County Office of Education mission is to provide, promote, and support leadership and service to ensure the success of every child, in every school, every day! The <a href="http://www.bayareapartnership.org/">Bay Area Partnership for Children and Youth</a> is a non-profit organization that helps schools in low-income communities successfully access public funding for critical support programs for students and their families.</li>
                        <li><a href="http://www.youthalive.org/">Youth ALIVE!</a> is a non-profit public health agency founded in 1991 dedicated to preventing youth violence and generating youth leadership in California communities experiencing high rates of violence. Youth ALIVE! advocates for strategies to reduce violence, and runs two programs in Oakland and Los Angeles</li>
                        <li><a href="http://www.yli.org/">Youth Leadership Institute</a> builds communities where young people and their adult allies come together to create positive social change. YLI designs and implements community-based programs that provide youth with leadership skills in the areas of drug and alcohol abuse prevention, philanthropy, and civic engagement. Building on these real-world program experiences, YLI creates curricula and training programs that foster social change efforts across the nation, all while promoting best practices in the field of youth development.</li>
                        <li><a href="http://www.childrenshospitaloakland.org/">Children Hospital</a></li>
                        <li><a href="http://soar2college.net/">Project SOAR II</a> is funded by the US Department of Education GEAR UP Initiative, whose goal is to prepare low-income students to succeed in college. Our program will enable students to achieve grade-level standards and learn what college is all about, while providing a network of assistance and a village of supporters. OUR MISSION: Project SOAR students will be successful contributors to society, equipped with the knowledge and skills to triumph personally and academically in college and beyond.</li>
                        <li><a href="http://www.opcmusic.org">Oakland Public Conservatory of Music (OPCMusic)</a> opens the world of music to all through access to quality instruction in a nurturing environment. We provide economical study in a variety of musical arts. We value rigor, innovation and scholarship in our quest to preserve the musical traditions of Oakland.</li>
                    </ul>
                </li>
            </ul>               
        </div>
        <!------------------------------------------------------- Tab 6 Staff ------------------------------------------------------->
        <div id="tab-6" class="tab-section">            
            <div id="staff-tab-wrapper">
                <ul id="staff-tab-list">
                    <li id="staff-tab-listItem-1" onclick="tab('tab1')">
                        <a><img title="Glynda Hull" alt="" src="//www.ecuc.info/wp-content/uploads/2012/08/glynda_c.jpg" /></a>
                    </li>
                    <li id="staff-tab-listItem-2" onclick="tab('tab2')">
                        <a><img title="Adrienne Herd" alt="" src="//www.ecuc.info/wp-content/uploads/2012/08/adrienne_c.jpg" /></a>
                    </li>
                    <li id="staff-tab-listItem-3" onclick="tab('tab3')">
                        <a><img title="jeeva_c" alt="" src="//www.ecuc.info/wp-content/uploads/2012/08/jeeva_c.jpg" /></a>
                    </li>
                    <li id="staff-tab-listItem-4" onclick="tab('tab4')">
                        <a><img title="laurel_c" alt="" src="//www.ecuc.info/wp-content/uploads/2012/08/laurel_c.jpg" /></a>
                    </li>
                </ul>
            </div>

            <table>
                <tbody>
                    <tr>
                        <td>
                            <span>Professor</span>
                            <span>Principal Investigator</span>
                        </td>
                        <td>
                            <span></span>
                            <span>Program Administrator</span>
                        </td>
                        <td>
                            <span></span>
                            <span>Program Administrator</span>
                        </td>
                        <td>
                            <span></span>
                            <span>Teacher Special Programs</span>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div id="staff-content-wrapper">
                <!------------------------------------------------------- Tab 1 ------------------------------------------------------->
                <div id="staff-tab-1">Professor Glynda Hull, Principal Investigator Graduate School of Education University of California, Berkeley 5627 Tolman Hall Berkeley, CA 94720 Phone: (510) 643-7452 Email: [email protected] Website: www.glyndahull.com Glynda Hull, who received her B.A. from Mississippi University for Women and her Ph.D. from the University of Pittsburgh, is co-chair of the Language and Literacy, Society and Culture Area in the Graduate School of Education. Her research interests cover a wide range of topics, from technology and education, to literacy and work, and community education—all of which she writes extensively on. Among her awards, she has twice been honored with the Richard Braddock Memorial Award byCollege Composition and Communication for best article. The committee was impressed that she practices what she preaches: by providing innovative learning experiences to those learning how to provide learning experiences to others. They also noted that many of her students had won awards in the field. One of her colleagues says "Professor Hulls teaching is an absolute wonder to behold. To visit her classes and seminars is an exercise in amazement. It is an extraordinary pleasure to watch as her undergraduate and graduate students set aside their self-absorption and enter wide-eyed into the play of ideas." In 2003 she received the Berkeley campuss Distinguished Teaching Award. She joined the Berkeley faculty in 1987. In 2001 she also received from the National Council of Teachers of English their award for best article reporting qualitative or quantitative research related to technical or scientific communication. Recent books include Schools Out! Bridging Out-of-School Literacies with Classroom Practicefrom Teachers College Press (co-edited with Katherine Schultz, 2002); Changing Work, Changing Workers: Critical Perspectives on Language, Literacy, and Skills(1997); and The New Work Order: Behind the Language of the New Capitalism(with J. Gee et al., 1996).</div>
                <!------------------------------------------------------- Tab 2 ------------------------------------------------------->
                <div id="staff-tab-2">Adrienne Herd, Program Administrator Graduate School of Education University of California, Berkeley 5513 Tolman Hall Berkeley, CA 94720 Cell Phone: (510) 919-4348 (preferred method of contact) Phone: (510) 643-6480 Email: [email protected] </div>
                <!------------------------------------------------------- Tab 3 ------------------------------------------------------->
                <div id="staff-tab-3">Jeeva Roche, Program Administrator Graduate School of Education University of California, Berkeley 5513 Tolman Hall Berkeley, CA 94720 Email: [email protected] </div> 
                <!------------------------------------------------------- Tab 4 ------------------------------------------------------->
                <div id="staff-tab-4">Laurel bio coming soon...</div>
            </div>
        </div>
    </div>
    <script>
        myTabs.init();
    </script>
</body>

Я не применял никакого стиля страницы здесь, кроме как с разделами вкладки и элементами списка вкладок/навигационных элементов.

Вы должны просмотреть, принять и изменить этот код. Конечно, есть области, которые еще предстоит решить, улучшить и/или закончить... например, div # tab-6.tab-section staff-tab-list.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню