Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>demo</title>
- <style>
- #content ul {
- margin: 0px;
- font-family: Arial, Helvetica, sans-serif;
- }
- #content li {
- float: left;
- margin: 0;
- padding: 0;
- height: 21px;
- line-height: 21px;
- border-left: none;
- margin-bottom: -1px;
- overflow: hidden;
- position: relative;
- }
- .tabtop {
- float: left;
- background-color: #dedede;
- padding-top: 5px;
- border: 1px solid #909090;
- }
- .container {
- margin: 10px auto;
- }
- ul.tabs {
- margin: 0;
- padding: 0;
- float: left;
- list-style: none;
- height: 21px;
- width: 100%;
- }
- ul.tabs li {
- float: left;
- margin: 0;
- padding: 0;
- height: 21px;
- line-height: 21px;
- border-left: none;
- margin-bottom: -1px;
- background: #dedede;
- overflow: hidden;
- position: relative;
- }
- ul.tabs li a {
- font-family: Arial, Helvetica, sans-serif;
- font-weight: bold;
- text-decoration: none;
- color: #5b5b5b;
- display: block;
- font-size: 12px;
- padding: 0 15px;
- outline: none;
- /*text-shadow:0.5px 0.5px #2e2d2e;*//*#c3c3c3;*/
- }
- ul.tabs li a:hover {
- background: #ccc;
- }
- html ul.tabs li.active,html ul.tabs li.active a:hover {
- background-color: #909090; /** fundo configuravel **/
- -moz-border-radius-topright: 5px;
- -khtml-border-radius-topright: 5px;
- -webkit-border-top-right-radius: 5px;
- -moz-border-radius-topleft: 5px;
- -khtml-border-radius-topleft: 5px;
- -webkit-border-top-left-radius: 5px;
- }
- li.active a{
- -moz-border-radius-topright: 5px;
- -khtml-border-radius-topright: 5px;
- -webkit-border-top-right-radius: 5px;
- -moz-border-radius-topleft: 5px;
- -khtml-border-radius-topleft: 5px;
- -webkit-border-top-left-radius: 5px;
- color: #fff;
- text-shadow:0.5px 0.5px #2e2d2e;
- }
- ul.tabs li.active a {
- color: #fff;
- }
- .tab_container {
- border-top: none;
- clear: both;
- float: left;
- width: 100%;
- }
- .tab_content {
- padding: 5px;
- padding-top: 10px;
- font-size: 1.2em;
- background-image: url(http://www.cptec.inpe.br/widget/images/selo/fundo.png);
- background-repeat: repeat-x;
- background-position: bottom;
- background-color: #909090; /** fundo configuravel **/
- }
- .tab_content img {
- float:left;
- }
- .linha {
- background-image: url(http://www.cptec.inpe.br/widget/images/selo/linha.png);
- background-repeat: repeat-x;
- height: 2px;
- }
- .setas {
- background-image: url(http://www.cptec.inpe.br/widget/images/selo/setas.png);
- background-repeat: no-repeat;
- height: 99px;
- width: 49px;
- float: right;
- margin-right: 7px;
- margin-top: 7px;
- font-size: 18px;
- font-weight: bold;
- color: #fff;
- font-family: Arial, Helvetica, sans-serif;
- }
- .max {
- margin-top: 18px;
- }
- .min {
- margin-top: 18px;
- }
- .desc {
- color: #222;
- font-size: 11px;
- font-family: Arial, Helvetica, sans-serif;
- text-align: center;
- font-weight: bold;
- margin-right: 5px;
- margin-left: 5px;
- }
- .cidade a {
- color: #FFFFFF;
- font-size: 11px;
- float: left;
- font-family: Arial, Helvetica, sans-serif;
- /*margin-top: 3px;
- margin-left: 5px;*/
- text-decoration: none;
- font-weight: bold;
- display:block;
- }
- .cptec a {
- color: #FFFFFF;
- font-size: 11px;
- float: right;
- font-family: Arial, Helvetica, sans-serif;
- margin-top: 3px;
- margin-right: 5px;
- text-decoration: none;
- font-weight: bold;
- }
- .clearb {
- clear: both;
- }
- </style>
- <script src="js/jquery-1.11.1.min.js"></script>
- </head>
- <body>
- <script>
- $(document).ready(function() {
- $('#divframe').load(
- 'proxy.php .tabtop', function() {
- $('#divframe .tab_content').hide();
- $('#divframe .tabs li:first').addClass('active');
- $('#divframe .tab_content:first').show();
- $('#divframe .tabs li').click(function(){
- $('#divframe .tabs li').removeClass('active');
- $(this).addClass('active');
- $('#divframe .tab_content').hide();
- $($(this).children('a').attr('href')).show();
- });
- });
- });
- </script>
- <div id="divframe"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement