jquery - Any DIV inside tab content can not appear -


i used simple tab jquery code web show changing content :

i put code in head tag of html page:

<script src="js/jquery-1-9-1.js"></script>   <script type="text/javascript">     $(document).ready(function(){           $('#tabs div').hide();   //hide           $('#tabs div:first').show();   //show           $('#tabs ul li:first').addclass('active');           $('#tabs ul li a').click(function(){                $('#tabs ul li').removeclass('active');                $(this).parent().addclass('active');                var currenttab = $(this).attr('href');                 $('#tabs div').hide();    //hide                $(currenttab).show();    //show                return false;                });     }); </script>

and rules in css file:

/*tab media k-enkripsi*/ .tab-wrapper {  background:#fcf;   width: 768px; height:885px; bottom:0;   margin:0 auto; }  /*  tab wrap content    */ #tabs {    width: 100%; height: 150px;   margin: 0 auto; }   /*  tab content yg berubah2   */ #tabs div {     width: 100%; height:150px;   margin:0px;    clear: both; }  h3 {   font:18px "scada-bold"; color:#f08435;   letter-spacing: 0.1em;   position:relative; float:left;   text-align:left;   margin:20px auto 20px; }  .tab-img {   width: 768px; height:465px; background: red; }  .for-tab {     float: right;      width:100%; height:150px;     overflow:hidden;     text-align:left !important;     bottom:0;     font: 16px "scada-regular" !important; color:white !important; }  #tabs ul li { position: relative; float: left;   text-decoration: none;   padding: 8px;   color:white;   font-weight: bold; }   /*  pagination tab menu navigator */ #tabs ul {    position: relative; float: left; left:-38px;   width:100%; height: 35px; margin-top: 30px; } #tabs li { background: #aeaeae; display: inline;   width: 30px; height: 34px;  margin-right: 38px;   border-radius: 2px;   list-style: none;    font:17px "melbourne-regular"; color: white;  } #tabs li, #tabs li {   float: left;       text-align: center;   padding-left:7px; } #tabs ul li.active {   background: #f08435;   } #tabs ul li.active {   color: white; }

and last put in html page show content tab:

<!-- tabmedia-enkripsi1 -->         <div class="tab-wrapper">                     <div id="tabs">                 <div id="tab-1" class="animated fadein">                     <div class="tab-img"></div>                     <p class="for-tab">lorem satu ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod                     tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo                     consequat. duis aute irure dolor in reprehenderit in voluptate velit esse                     cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non                     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                     </p>                 </div>                  <div id="tab-2" class="animated fadein">                     <div class="tab-img"></div>                     <p class="for-tab">lorem dua ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod                     tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo                     consequat. duis aute irure dolor in reprehenderit in voluptate velit esse                     cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non                     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                         </p>                 </div>                  <div id="tab-3" class="animated fadein">                     <div class="tab-img"></div>                     <p class="for-tab">lorem tiga ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod                     tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo                     consequat. duis aute irure dolor in reprehenderit in voluptate velit esse                     cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non                     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                     </p>                 </div>                  <div id="tab-4" class="animated fadein">                     <div class="tab-img"></div>                     <p class="for-tab">lorem empat ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod                     tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo                     consequat. duis aute irure dolor in reprehenderit in voluptate velit esse                     cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non                     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                     </p>                 </div>                      <ul>                         <li><a href="#tab-1">1</a></li>                         <li><a href="#tab-2">2</a></li>                         <li><a href="#tab-3">3</a></li>                         <li><a href="#tab-4">4</a></li>                     </ul>             </div>  <!-- tabs -->                   </div> <!-- tab-wrapper -->

i tested in browser safari, firefox, class 'tab-img' doesn't appear thought should. tried add div class, span class. don't work @ all.

only work if put tag viewing text p, h1 h2 (all heading tag). , hard me put image or animated content if tag work showing text

could me find missed @ code?

in jquery you're using selector $('#tabs div').

what means div children (and children) of #tabs hidden , that's why class tab-img isn't working. can make selector $('#tabs > div') searches divs have #tab parent.

e.g. http://jsfiddle.net/kvkzx/1/


Comments

Post a Comment

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

sometimes when hit address of webpage in browser, removes first slash after domain. examples: www.mywebsite.com/scripts/script_6.php -> trying load www.mywebsite.comscripts/script_6.php www.mywebsite.com/test.php -> trying load www.mywebsite.comtest.php after entering again, loads page. a .htaccess settings must wrong: rewritebase / errordocument 404 http://www.mywebsite.com/oops.php errordocument 401 /notallowed.php rewriteengine on # turn on rewriting engine #gzip <ifmodule mod_deflate.c> addoutputfilterbytype deflate text/text text/html text/plain text/xml text/css application/x- javascript application/javascript </ifmodule> #end gzip rewritecond %{http_host} ^mywebsite\.com rewriterule ^(.*)$ http://www.mywebsite.com$1 [r=permanent,l] directoryindex index6.php rewriterule ^termsofuse/?$ termsofuse.php [nc,l] # handle requests "adpolicy" rewriterule ^privacy-policy/?$ privacy-policy.php [nc,l] # handle requ...
Read more

Automatically create pages in phpfox -

i have array of information of places , wanna use them create multiple pages in phpfox site. first tried manually insert data in phpfox database (in tables of phpfox_pages , phpfox_pages_text ). the page shown in site when opening it's link, site says: the page looking cannot found. do know other tables should manipulate make work? or know plugin phpfox same? thanks, solved ( @purefan guide): "pages" has user if take @ phpfox_user table, you'll found out how fetch new records on that. there 2 ambiguous fields in table ( password & password_salt ). can use script create values fields: <?php function generaterandomstring() { $length = 164; $characters = '-_0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz'; $randomstring = ''; ($i = 0; $i < $length; $i++) { $randomstring .= $characters[rand(0, strlen($characters) - 1)]; } return $randomstring; } $ssalt = '';...
Read more

c# - Farseer ContactListener is not working -

i'm using farseer in xna project, have trouble contactlistener. created class contactlistener these 2 error messages , don't know how fix problems. the type or namespace name 'contactlistener' not found (are missing using directive or assembly reference?) the type or namespace name 'contactimpulse' not found (are missing using directive or assembly reference?) what wrong contactlistener class? class mycontactlistener: contactlistener { void begincontact(contact contact) { /* handle begin event */ } void endcontact(contact contact) { /* handle end event */ } void presolve(contact contact, ref manifold oldmanifold) { fixture fixturea = contact.fixturea; fixture fixtureb = contact.fixtureb; if (fixtureb.collisioncategories == category.cat10) { contact.enabled = false; } } void postsolve(contact contact, ref contactimpulse impulse) { /* handle post-solve event */ } }...
Read more