我在页面顶部有3个标签,然后每个标签都有一个手风琴。
我需要手风琴的底部选项始终保持在200像素的固定高度。 我想我可以把它从手风琴中取出来并设置一个默认高度,但是我需要它在标签系统中切换。 有任何想法吗?
这是代码
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title> <!-- Website Styles --> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/skins/dark.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen"> <script src="js/jquery-1.9.1.js"></script> <!-- Scripts Styles --> <!-- Custom StyleSwitcher stylesheet --> <style type="text/css"> body { background-color: #000000; } </style> <!--[if IE 7]> <link rel="stylesheet" media="screen" href="css/ie7.css"/> <![endif]--> </head> <body> <div class="wrapper"><div class="one_half"> <div class="one_half last"> <!-- Accordion --> <div id="tabs"> <ul> <li class="sizes">Size ></li> <li >A</a></li> <li >B</a></li> <li >C</a></li> </ul> <div id="tabs-1"> <div id="accordion1"> <h3 class="tab_first">A</h3> <div>Content </div> <h3>B</h3> <div>Content </div> </div> <h3>C</h3> <div>Content that needs to stay open to 200 pixels </div> </div> </div> <div id="tabs-2"><div id="accordion2"> <h3>First</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <h3>Second</h3> <div>Phasellus mattis tincidunt nibh.</div> <h3>Third</h3> <div>Nam dui erat, auctor a, dignissim quis.</div></div> <div id="tabs-3">Content that always needs to stay open to 200 pixels</div> </div> </div></div> <!-- FOOTER END --> <!-- jQuery Scripts --> <script src="js/jquery-ui-1.10.3.custom.js"></script> <script>$(function() { $( "#accordion1, #accordion2, #accordion3" ).accordion({active: 1 }); autoheight: false collapsible: false heightStyle: "fill" minHeight: 550, $( "#tabs" ).tabs(); });</script> <script type="text/javascript" src="js/contact-form.js"></script> <script type="text/javascript" src="js/custom.js"></script> </body> </html>I have 3 tabs at the top of the page, and then an accordion in each one.
I need my bottom option in the accordion to always stay open at a fixed height of 200 pixels. I'm thinking I can take it out of the accordion and just set a default height, however I need it to switch within the tabbed system as well. Any ideas?
Here is the code
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title> <!-- Website Styles --> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/skins/dark.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen"> <script src="js/jquery-1.9.1.js"></script> <!-- Scripts Styles --> <!-- Custom StyleSwitcher stylesheet --> <style type="text/css"> body { background-color: #000000; } </style> <!--[if IE 7]> <link rel="stylesheet" media="screen" href="css/ie7.css"/> <![endif]--> </head> <body> <div class="wrapper"><div class="one_half"> <div class="one_half last"> <!-- Accordion --> <div id="tabs"> <ul> <li class="sizes">Size ></li> <li >A</a></li> <li >B</a></li> <li >C</a></li> </ul> <div id="tabs-1"> <div id="accordion1"> <h3 class="tab_first">A</h3> <div>Content </div> <h3>B</h3> <div>Content </div> </div> <h3>C</h3> <div>Content that needs to stay open to 200 pixels </div> </div> </div> <div id="tabs-2"><div id="accordion2"> <h3>First</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <h3>Second</h3> <div>Phasellus mattis tincidunt nibh.</div> <h3>Third</h3> <div>Nam dui erat, auctor a, dignissim quis.</div></div> <div id="tabs-3">Content that always needs to stay open to 200 pixels</div> </div> </div></div> <!-- FOOTER END --> <!-- jQuery Scripts --> <script src="js/jquery-ui-1.10.3.custom.js"></script> <script>$(function() { $( "#accordion1, #accordion2, #accordion3" ).accordion({active: 1 }); autoheight: false collapsible: false heightStyle: "fill" minHeight: 550, $( "#tabs" ).tabs(); });</script> <script type="text/javascript" src="js/contact-form.js"></script> <script type="text/javascript" src="js/custom.js"></script> </body> </html>最满意答案
我想如果你坚持使用jQuery UI,你可以把它变成自己的非折叠式手风琴, 点击这里查看( 注意根据我的原始答案编辑,以解决你的200px高度问题):
<div id="tabs"> <ul> <li><a href="#tabs-1">1</a> </li> <li><a href="#tabs-2">2</a> </li> <li><a href="#tabs-3">3</a> </li> </ul> <div id="tabs-1"> <div class="accordion"> <div class="height_control"> <div class="sub_accordion"> <h3>Heading1</h3> <p>The content of heading1</p> <h3>Heading2</h3> <p>The content of heading2</p> </div> </div> <div class="height_control"> <div class="sub_accordion"> <h3>Always open Heading</h3> <p>This content must always be open</p> </div> </div> </div> </div> <div id="tabs-2"> <div class="accordion"> <div class="height_control"> <div class="sub_accordion"> <h3>Heading1</h3> <p>The content of heading1</p> <h3>Heading2</h3> <p>The content of heading2</p> </div> </div> <div class="height_control"> <div class="sub_accordion"> <h3>Always open Heading</h3> <p>This content must always be open</p> </div> </div> </div> </div> <div id="tabs-3"> <div class="accordion"> <div class="height_control"> <div class="sub_accordion"> <h3>Heading1</h3> <p>The content of heading1</p> <h3>Heading2</h3> <p>The content of heading2</p> </div> </div> <div class="height_control"> <div class="sub_accordion"> <h3>Always open Heading</h3> <p>This content must always be open</p> </div> </div> </div> </div> </div>和JS:
$(function () { $("#tabs").tabs({ heightStyle: "content" }); $( ".height_control:not(:last-child) .sub_accordion").accordion({ collapsible: true, heightStyle: "content" }); $( ".height_control:last-child .sub_accordion" ).accordion({ collapsible: false, heightStyle: "fill" }); });最后是CSS:
.height_control:last-child { height: 200px; }I guess if you're sticking with jQuery UI, you could make it it's own non-collapsible accordion, click here to take a look (Note edited from my original answer to address your 200px height issue):
<div id="tabs"> <ul> <li><a href="#tabs-1">1</a> </li> <li><a href="#tabs-2">2</a> </li> <li><a href="#tabs-3">3</a> </li> </ul> <div id="tabs-1"> <div class="accordion"> <div class="height_control"> <div class="sub_accordion"> <h3>Heading1</h3> <p>The content of heading1</p> <h3>Heading2</h3> <p>The content of heading2</p> </div> </div> <div class="height_control"> <div class="sub_accordion"> <h3>Always open Heading</h3> <p>This content must always be open</p> </div> </div> </div> </div> <div id="tabs-2"> <div class="accordion"> <div class="height_control"> <div class="sub_accordion"> <h3>Heading1</h3> <p>The content of heading1</p> <h3>Heading2</h3> <p>The content of heading2</p> </div> </div> <div class="height_control"> <div class="sub_accordion"> <h3>Always open Heading</h3> <p>This content must always be open</p> </div> </div> </div> </div> <div id="tabs-3"> <div class="accordion"> <div class="height_control"> <div class="sub_accordion"> <h3>Heading1</h3> <p>The content of heading1</p> <h3>Heading2</h3> <p>The content of heading2</p> </div> </div> <div class="height_control"> <div class="sub_accordion"> <h3>Always open Heading</h3> <p>This content must always be open</p> </div> </div> </div> </div> </div>And the JS:
$(function () { $("#tabs").tabs({ heightStyle: "content" }); $( ".height_control:not(:last-child) .sub_accordion").accordion({ collapsible: true, heightStyle: "content" }); $( ".height_control:last-child .sub_accordion" ).accordion({ collapsible: false, heightStyle: "fill" }); });And finally the CSS:
.height_control:last-child { height: 200px; }更多推荐
发布评论