Home >Web Front-end >HTML Tutorial >jquery ui tab_html/css_WEB-ITnose

jquery ui tab_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:21:441210browse

jQuery UI HTML CSS

I used jquery ui to debug the switching effect for a day without success. I will make a demo tonight. After finishing the demo, the switching effect did not appear on the page. I don’t know why. It should be quoted. The js or css are also quoted, but there is no switching effect. Please help me explain. Thank you very much. Hurry! ! !

2689eb8c40bc4d4ffe96db8efe197cf47c8107cdebc3bab0783640477bc4f042 b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f dc8a0a18463f8a24a40a72f125c7a70d c5662758b36310f97fbb6e16993c9d0b 818c12620ab85792e63ae831e1ebf9dc
< ;script type="text/javascript">
$("#tabs").tabs({ collapsible: true,                                                                          click, toggle"} });


2cacc6d41bbb37262a98f745aa00fbf0


9c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d 0ec44c3a9f278a0c9d32bd934d4cca5f                                                                     9672ba132fa0b9a43ae3f69878903867Tab 25db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb                                                                  ;/ul> ; 9746442f332bdfd19a11268eab812240Content 116b28748ea4df4d9c2150843fecfba68 ; ccf1df7f70ed1d5db95fe1516fa3ce68Content 216b28748ea4df4d9c2150843fecfba68 div> 16b28748ea4df4d9c2150843fecfba68 e54241044a02db6099a113c6b8190957 🎜>
Reply to discussion (solution)

$("#tabs").tabs('option', 'active', '1');

Latest switch

Official demo


<html xmlns="http://www.w3.org/1999/xhtml">        <head runat="server">        <title>hhhhh</title>        <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script><link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>        <script type="text/javascript"> 		$(function() {            $("#tabs").tabs({                    collapsible: true,                    disabled: [],                    selected: 1,                    event: 'click',                    fx: {                        opacity: "toggle"                    }                });		});        </script>    </head>        <body><div id="tabs">  <ul>    <li><a href="#tabs-1">Nunc tincidunt</a></li>    <li><a href="#tabs-2">Proin dolor</a></li>    <li><a href="#tabs-3">Aenean lacinia</a></li>  </ul>  <div id="tabs-1">    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>  </div>  <div id="tabs-2">    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>  </div>  <div id="tabs-3">    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>  </div></div>    </body></html>

Thank you, but I have solved it myself. It was caused by browser cache

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn