我已经完成了搜索，但是在网络开发中完全迷失了，我无法找到专门针对我的案例的答案。
请检查this jsFiddle。我有一套较大的标签，然后是员工中的一组子标签，每个员工都有一个生物;截至目前，子选项卡的onclick链接到较大选项卡的选项卡内容。我已经尝试相应地更改内容＃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)
我创造了以下小提琴： http://jsfiddle.net/brcaswell/9Yp8g/7/
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部分......意思是......你只能走三层深。
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;}
<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: info@omiacademy.org Principal: Mark Ryan, mryan@omiacademy.org Site Coordinator: <a href="/contact-us/staff/colette-walker/">Colette Walker</a>, cwalker@omiacademy.org
<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, mchristensen@csdo.org Site Coordinator: <a href="/contact-us/staff/jill-chacon/">Jill Chacon</a>, jchacon@csdo.org<
<a href="http://www.olrschool.com/">http://www.olrschool.com/</a>
</li>
<li>[SA] Saint Anthony’s Catholic School 1500 E. 15TH Street Oakland, CA 94606 Phone: (510) 534-3334 Principal: Barbara Flannery Vice Principal: Marisol Preciado, mpreciado@csdo.org Site Coordinator: <a href="/contact-us/staff/rogelio-nevarez/">Rogelio Nevarez</a>, rnevarez@csdo.org
<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, smoradi@csdo.org Site Coordinator: <a href="/contact-us/staff/gregory-defabio/">Gregory Defabio</a>, gdefabio@csdo.org
<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, jpetersen@saintelizabeth.us Site Coordinator: <a href="/contact-us/staff/utami-setiyadi/">Utami Setiyadi</a>, usetiyadi@saintelizabeth.us
<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, rpierre-antoine@csdo.org 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, amagovern@csdo.org Site Coordinator: <a title="Amanda Corey" href="http://www.ecuc.info/contact-us/staff/nora-kenney/">Amanda Corey</a>, acoray@csdo.org
<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's <a href="http://www.ed.gov/programs/21stcclc/index.html">website</a> or visit the California Department of Education's <a href="http://www.cde.ca.gov/ls/ba/cp/"">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's 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's <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 program’s 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's 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's 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's 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's 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's Hospital</a></li>
<li><a href="http://soar2college.net/">Project SOAR II</a> is funded by the US Department of Education's 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: glynda@berkeley.edu 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 Hull’s 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 campus’s 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 School’s 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: aherd@berkeley.edu </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: jeeva@berkeley.edu </div>
<!------------------------------------------------------- Tab 4 ------------------------------------------------------->
<div id="staff-tab-4">Laurel's bio coming soon...</div>
</div>
</div>
</div>
<script>
myTabs.init();
</script>
</body>
除了标签部分和标签/导航列表项之外，我没有在此处应用任何样式的页面。
您应该查看，采用和修改此代码。当然还有一些领域需要解决，改进和/或完成......例如 div＃tab-6.tab-section staff-tab-list。
答案 1 :(得分：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进行一些小的更改，它才能正常运行。
你可以看到小提琴的变化。