logo标签列表

jQuery手风琴 - 首个选项卡在访问时打开

javascriptjqueryhtml
3

我最近将个人作品集网站（www.edwardmanson.com）上传到了网络上，并一直在尝试找到方法使得手风琴部分的第一个标签（关于我）在任何人访问网站时都保持打开状态。

$(document).ready(function() { 
$(".desc").hide();  
$("h3.open-close").click(function(){  
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");

$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
});
不足的信息，请查看http://jqueryui.com/demos/accordion/，它就在那里说明如何打开您想要的任何选项卡。-1 - Matt
6个回答
1

这个会完成任务...

$("html body div#wrap div#main div#accordian_wrap div#container h3.open-close a span").trigger('click');

但是您可能希望更精确地识别可点击的对象...这可能会在页面编辑时发生变化。

只需查看是否可以在 span/a 标签上设置 id 或其他属性，以便它变成：

$("#firstItemOpen").trigger('click');
1
你可以查看文档。可能会有一个叫做"defaultOpen"的类或者类似的东西。 - Steen
1

看起来你没有使用 JQuery 手风琴，而是自定义的手风琴。我的建议是改用 JQuery 手风琴。默认情况下，第一个手风琴将会打开，这正是你想要的。

要在你的示例中实现此效果，只需将以下内容添加到你的 custom.js 文件中：

$(".desc:first").show();

将此内容粘贴到准确的位置（这是您的JS文件的样子）

/***************************************************
TOGGLE JAVASCRIPT
***************************************************/
$(document).ready(function() {

$(".desc").hide();
$(".desc:first").show(); // <-- ADD IT HERE, AFTER THIS FIRST HIDE() CALL!

如果您想始终保持第一个打开状态，则只需从HTML文件中的第一个h3标签中删除“desc”类即可。
小例子： 

/***************************************************
TOGGLE JAVASCRIPT
***************************************************/
$(document).ready(function() {
    
$(".desc").hide();
    $(".desc:first").show(); // THIS LINE IS ADDED!!!
$("h3.open-close").click(function(){
if ($(this).is(".current"))
{
$(this).removeClass("current");
$(this).next(".desc").slideUp(400);
}
else
{
$(".desc").slideUp(400);
$("h3.open-close").removeClass("current");
$(this).addClass("current");
$(this).next(".desc").slideDown(400);
}
});
});
    html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body {
    background-color: #F2F3F3;
    background-image: url("images/bg.jpg");
    background-repeat: repeat;
    color: #333333;
    font-family: 'DroidSerifRegular',Arial,sans-serif;
    font-size: 13px;
    line-height: 22px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
A:link {
    color: #333333;
    text-decoration: none;
}
A:visited {
    text-decoration: none;
}
A:active {
    text-decoration: none;
}
A:hover {
    color: #57AEAE;
    text-decoration: none;
}
@font-face {
    font-family: "BebasRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BEBAS___-webfont.eot?#iefix")  format("embedded-opentype"), url("fonts/BEBAS___-webfont.woff")  format("woff"), url("fonts/BEBAS___-webfont.ttf") format("truetype"),  url("fonts/BEBAS___-webfont.svg#BebasRegular") format("svg");
}
@font-face {
    font-family: "DroidSerifRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/DroidSerif-Regular-webfont.eot?#iefix")  format("embedded-opentype"),  url("fonts/DroidSerif-Regular-webfont.woff") format("woff"),  url("fonts/DroidSerif-Regular-webfont.ttf") format("truetype"),  url("fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular")  format("svg");
}
@font-face {
    font-family: "DroidSerifBold";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/DroidSerif-Bold-webfont.eot?#iefix")  format("embedded-opentype"), url("fonts/DroidSerif-Bold-webfont.woff")  format("woff"), url("fonts/DroidSerif-Bold-webfont.ttf")  format("truetype"),  url("fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold") format("svg");
}
@font-face {
    font-family: "GoudyBookletter1911Regular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/goudybookletter1911-openamp.eot?iefix")  format("eot"), url("fonts/goudybookletter1911-openamp.woff")  format("woff"), url("fonts/goudybookletter1911-openamp.ttf")  format("truetype"),  url("fonts/goudybookletter1911-openamp.svg#webfont0ZQvEa4G")  format("svg");
}
.openamp {
    font-family: GoudyBookletter1911Regular;
}
h1.fontface {
    color: #57AEAE;
    font: 34px/44px 'BebasRegular',Arial,sans-serif;
    letter-spacing: 0;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h2.fontface {
    color: #666666;
    font: 18px/27px 'DroidSerifBold',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h3.fontface {
    color: #666666;
    font: 18px/27px 'BebasRegular',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
h4.fontface {
    color: #F1F2F2;
    font: 10px/23px 'DroidSerifBold',Arial,sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 0 #FFFFFF;
}
#header {
    background-color: #57AEAE;
    height: 8px;
    position: relative;
    width: 100%;
}
#wrap {
    min-height: 100%;
}
#main {
    margin: 0 auto;
    min-height: 100%;
    overflow: auto;
    padding-bottom: 100px;
    position: relative;
    width: 970px;
}
#logo {
    float: left;
    padding-top: 30px;
    width: 960px;
}
#logo_text {
    float: left;
}
#social {
    float: right;
    margin-top: 25px;
}
#twitter {
    float: right;
}
#facebook {
    float: right;
    padding-right: 10px;
}
#mail {
    float: right;
    padding-right: 10px;
}
#slider_container {
    background-color: #FFFFFF;
    float: left;
    height: 260px;
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 5px;
    width: 950px;
}
.theme-default #slider {
    height: 260px;
    width: 950px;
}
#container {
    float: left;
    margin-bottom: 30px;
    margin-top: 30px;
    overflow: hidden;
    padding: 0;
    width: 960px;
}
#accordian_wrap {
    float: left;
    width: 960px;
}
.open-close {
    background-image: url("js/images/open.png");
    background-position: right 13px;
    background-repeat: no-repeat;
    font-family: 'BebasRegular';
    position: relative;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 100%;
}
.open-close a {
    background-image: url("js/images/border.gif");
    background-position: left bottom;
    background-repeat: repeat-x;
    color: #57AEAE;
    display: block;
    font-size: 24px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-decoration: none;
    text-transform: uppercase;
}
.open-close a:hover {
}
.current {
    background-attachment: scroll;
    background-image: url("js/images/close.png");
    background-position: right 13px;
    background-repeat: no-repeat;
    color: #189ACB;
}
.desc {
    background-image: url("js/images/border.gif");
    background-position: left bottom;
    background-repeat: repeat-x;
    overflow: hidden;
    padding-bottom: 20px;
    padding-top: 20px;
}
#content-top {
    border-bottom: 3px solid #349BA8;
    float: left;
    height: 24px;
    width: 100%;
    z-index: 8;
}
#close-tab {
    background-image: url("js/images/close1.png");
    background-position: center top;
    background-repeat: no-repeat;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    z-index: 99;
}
#close-tab a {
    display: block;
    height: 100%;
    width: 100%;
    z-index: 99;
}
#welcome {
    float: left;
    width: 150px;
}
#welcome_info {
    margin-top: 10px;
}
.photo_frame {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    margin-top: 5px;
    padding: 5px;
    width: 150px;
}
#hello {
    float: left;
    padding-left: 75px;
    width: 500px;
}
#hello_info {
    margin-top: 10px;
}
#skills {
    float: left;
    padding-left: 60px;
    width: 175px;
}
#skills_info {
    margin-top: 10px;
}
#ticks {
    float: left;
    margin-top: 2px;
}
#info {
    float: right;
    line-height: 23px;
    padding-right: 30px;
}
#cv {
    float: left;
    padding-top: 5px;
    width: 175px;
}
#cv_logo {
    float: left;
    margin-top: -5px;
}
#cv_info {
    float: right;
    line-height: 20px;
    padding-right: 75px;
}
.gallery_frame {
    background-color: #FFFFFF;
    float: left;
    height: 150px;
    margin-left: 20px;
    margin-top: 5px;
    padding: 5px;
    width: 150px;
}
.empty {
    float: left;
    height: 15px;
    width: 960px;
}
#blog {
    float: left;
    margin-right: 7px;
    width: 960px;
}
#blog_info {
    margin-bottom: 10px;
    margin-top: 10px;
}
#contact {
    float: left;
    margin-right: 7px;
    width: 250px;
}
#contact_info {
    margin-top: 10px;
}
#ways {
    float: left;
    margin-left: 70px;
    width: 350px;
}
#ways_info {
    margin-top: 10px;
}
#form {
    float: left;
    margin: 0;
    position: relative;
    width: 900px;
}
#form p {
    color: #999999;
    padding-right: 25px;
    padding-top: 15px;
}
#form div {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 300px;
}
#form div label {
    display: block;
    font-size: 0.9em;
    width: 310px;
}
.success {
    background-color: #FFFFFF;
    float: left;
    padding: 20px 30px;
    width: 920px;
}
.error {
    color: #CC0000;
    font-size: 11px;
    position: absolute;
    right: 12px;
    top: 0;
}
#form input, textarea {
    background-color: #EEEEEE;
    border-color: #C7C7C7 #E6E6E6 #E6E6E6 #C7C7C7;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    color: #CCCCCC;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin: 0 0 8px;
    padding: 11px 5px;
    width: 275px;
}
#form textarea {
    height: 85px;
    width: 300px;
}
#form input:focus, textarea:focus {
    background-color: #E1E1E1;
    border-color: #B4B4B4 #D6D6D6 #D6D6D6 #B4B4B4;
    color: #666666;
}
#form .submit {
    background-attachment: scroll;
    background-color: #57AEAE;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #EEEEEE;
    cursor: pointer;
    float: right;
    font-family: 'DroidSerifRegular',Arial,sans-serif;
    font-size: 13px;
    margin-bottom: 0;
    margin-right: -15px;
    margin-top: 0;
    padding-bottom: 6px;
    padding-top: 6px;
    position: relative;
    text-align: center;
    width: 315px;
}
#form .submit:hover, .submit.focus {
    background-color: #666666;
    color: #FFFFFF;
}
#form em {
    color: #CCCCCC;
    font-size: 0.9em;
    font-style: italic;
}
#footer {
    background: url("images/bg_footer.gif") repeat scroll 0 0 transparent;
    clear: both;
    height: 50px;
    margin-top: -50px;
    position: relative;
}
body:before {
    content: "";
    float: left;
    height: 100%;
    margin-top: -32767px;
    width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="accordian_wrap">
  <div id="container">
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">About Me</span></a></h3>
    <div class="desc" style="display: none;"> <!-- REMOVE DESC TO KEEP IT OPEN AT ALL TIMES!! -->
      <div id="welcome">
        <h3 class="fontface">Welcome</h3>
        <div id="welcome_info">
          <div class="photo_frame"> <img src="http://placehold.it/150x150"> </div>
        </div>
      </div>
      <div id="hello">
        <h3 class="fontface">Hello</h3>
        <div id="hello_info">
          <p class="fontface">I'm Edward Manson a web and graphics designer based in Belfast. I'm currently on my placement year working at Visionworks Interactive where I'm getting the opportunity to work on several projects as well as working within a dedicated and experienced team. I like anything that's compelling, intuitive and bespoke and try to implement these ideals when developing new ideas and pieces of work. I enjoy everything about design and work hard to always meet the goals of all parties involved. Have a look
            at my work and if you have any queries or questions please feel free to get in contact.</p>
        </div>
      </div>
      <div id="skills">
        <h3 class="fontface">Skills</h3>
        <div id="skills_info">
          <div id="ticks">
            <p><img src="images/ticks.png"></p>
            </div>
          <div id="info">
            <p>HTML &amp; CSS </p>
            <p>Javascript &amp; Jquery </p>
            <p>Graphics &amp; Layouts </p>
            <p>PHP, Wordpress</p>
            </div>
         
            <div id="cv">
        <div id="skills_info">
          <div id="cv_logo">
            <p><img src="images/cv.png"></p>
            </div>
          <div id="cv_info">
            <p><a href="images/personal_cv1.docx">View my CV</a></p>
            
            </div>
        </div>
      </div>
   
          
        </div>
      </div>
    </div>
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">My Work</span></a></h3>
    <div class="desc" style="display: none;">
      <div class="photo_frame"><a title="Rapid International Website Design" href="images/rapid.png" rel="example_group"><img src="images/rapid_1.png"></a></div>
      <div class="gallery_frame"><a title="Comhairle Interactive Map" href="images/map.png " rel="example_group"><img src="images/map_1.png"></a></div>
      <div class="gallery_frame"><a title="Alternative Heat Website Design" href="images/alternative_heat.png" rel="example_group"><img src="images/alternativeheat_1.png"></a></div>
      <div class="gallery_frame"><a title="Omagh Town Centre Website Design" href="images/omagh-web.png " rel="example_group"><img src="images/omagh_1.png"></a></div>
      <div class="empty"></div>
     
    </div>
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span style="margin-left: 0px;">Blog</span></a></h3>
    <div class="desc" style="display: none;">
      <div id="blog">
        <h3 class="fontface">September</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
         <h3 class="fontface">October</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
           
         <h3 class="fontface">November</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        
           
         <h3 class="fontface">December</h3>
        <div id="blog_info">
          <p class="fontface">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>
    
    
    
    
    <h3 class="open-close"><a href="javascript:void()"><span>Contact Me</span></a></h3>
    <div class="desc" style="display: none;">
      <div id="contact">
        <h3 class="fontface">Get In Contact</h3>
        <div id="blog_info">
          <p class="fontface">If you'd like to work with me or provide me with feedback or feelings on any of my work fill out the form on the right and I'll get back in contact as quick as possble. I always like to hear from people so feel free.</p>
        </div>
      </div>
      <div id="ways">
        <h3 class="fontface">Contact Form</h3>
        <div id="ways_info">
          <form action="send.php" method="post" class="contactForm" id="form">
            <div class="holder"> </div>
            <!--END holder-->
            <div class="holder">
              <div>
                <label>Name<em>*</em></label>
                <input type="text" class="requiredField" name="name">
              </div>
              <div>
                <label>Email <em>*</em></label>
                <input type="text" class="requiredField email" name="email">
              </div>
            </div>
            <!--END holder-->
            <div class="holder">
              <div>
                <label>Message</label>
                <textarea cols="60" rows="6" name="message"></textarea>
              </div>
              <div>
                <input type="submit" title="Please make sure you filled out all required fields." class="submit toolTip" value="Submit">
              </div>
            </div>
            <!--END holder-->
          </form>
          <!--END ID form -->
        </div>
      </div>
    </div>
  </div>
</div>

0
$('.desc').not(':first').hide();

应该隐藏除第一个desc div之外的所有内容。 此外，将.current类添加到您的第一个div。

这是假设您想要打开第一个div。

0

使用active参数

$( "#myAcc" ).accordion({
   active: $(".defaultOpen")
});
0

您可以使用插件的activate方法。有关更多信息，请参见API文档。

例如：

$( "#accordion" ).accordion( "activate" , 0)

(如果您的选项卡“关于我”是第一个选项卡)

[编辑]
这里是一个可工作的jsfiddle：http://jsfiddle.net/cA6bK/

您可以在任何时候触发此API（onload，onchange或其他）

0
你可以尝试这个：
$("#youdiv").addClass('in').attr('aria-expanded', 'true');
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接