multiples jquery solo funciona 1

Citar
Escrito el 29 Nov 2013 04:18 am
lo he resuelto, aca pueden ver como
Código :
 
<!DOCTYPE HTML>
<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Horizontal content scroll with jQuery - gazpo.com</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>      
      <link rel="stylesheet" type="text/css" href="style.css" />      
      
      <style type="text/css">
      html, body, ul, ol, li, form, fieldset, legend{
         margin: 0;
         padding: 0;
      }

      h1, h2, h3, h4, h5, h6, p { margin: 0; }
      
      body{
         background: url('bg.png') repeat;
         font-family: 'Vollkorn', serif, Arial;
         font-size: 15px;
         line-height: 1.5;
      }
            
      p{
         margin-bottom:15px;
      }
      
      a{
         color:#0073BF;
         text-decoration:none;
      }
      
      h2{
         text-align:center;
         font-size:32px;
         font-weight:400;
      }
      
      h4{
         text-align:center;
         font-size:18px;   
         font-weight:400;         
      }
      
      #wrap{         
         width:600px;
         margin:0 auto;
      }
      
      #header{
         margin:20px 0;
      }
            
      #content {      
         overflow:hidden;
         -moz-box-shadow: 0 0 2px 2px #ccc;
         -webkit-box-shadow: 0 0 2px 2px #ccc;
         box-shadow: 0 0 2px 2px #ccc;         
      }
      
      .contentbox-wrapper {         
         position:relative; 
         left:0; 
         width:3000px; 
         height:100%;
      }
      
      
      .contentbox-wrapper2 {         
         position:relative; 
         left:0; 
         width:3000px; 
         height:100%;
      }
      .contentbox {
         width:580px; 
         height:100%; 
         float:left; 
         padding:10px;
         background:#fff;
      }
          
          .contentbox2 {
         width:580px; 
         height:100%; 
         float:left; 
         padding:10px;
         background:#fff;
      }
      
      #nav {
         margin-top:10px;
         background: url("navbg.png") repeat-x center bottom;
         border-bottom: 1px solid #DDDDDD;
         padding: 5px 10px;
      }
      
      
      #nav ul li{
         display:inline;
         margin-right:10px;
      }
      
      #nav a.active {
         font-weight:bold;
      }      
      
      #footer{
         text-align:center;
         margin-top:20px;
      }   
      
      
      #nav2 {
         margin-top:10px;
         background: url("navbg.png") repeat-x center bottom;
         border-bottom: 1px solid #DDDDDD;
         padding: 5px 10px;
      }
      
      
      #nav2 ul li{
         display:inline;
         margin-right:10px;
      }
      
      #nav2 a.active {
         font-weight:bold;
      }      
      

      </style>

      
<script>

function goto(id, t){   
   //animate to the div id.
   $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
   
   // remove "active" class from all links inside #nav
    $('#nav a').removeClass();
    $('#nav2 a').removeClass('active');
    
    
   
   // add active class to the current link
    $(t).addClass('active');   
}

</script>

<script>

function goto2(id, t){   
   //animate to the div id.
   $(".contentbox-wrapper2").animate({"left": -($(id).position().left)}, 600);
   
   // remove "active" class from all links inside #nav
    $('#nav a').removeClass();
    $('#nav2 a').removeClass('active');
   
   // add active class to the current link
    $(t).addClass('active');   
}

</script>


   </head>
   
   <body>
      
   
      
      
         
      
      
         <div class="contentbox-wrapper">
            
            <div id="about" class="contentbox">
                        
            <h3>About</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
                        
            </div>
            
            <div id="work" class="contentbox">
            <h3>Work</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
            </div>
            
            <div id="contact" class="contentbox">
            <h3>Contact</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
            </div>
      
         </div>         
         
      
      
      <div id="nav">
         <ul>
            <li ><a class="active" href="#" onClick="goto('#about', this); return false">About</a></li>
            <li><a href="#" onClick="goto('#work', this); return false">Work</a></li>
            <li><a href="#" onClick="goto('#contact', this); return false">Contact</a></li>
         </ul>
      </div>
      
      
      
      
      
      <div class="contentbox-wrapper2">
            
            <div id="about2" class="contentbox2">
                        
            <h3>About</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
                        
            </div>
            
            <div id="work2" class="contentbox2">
            <h3>Work</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
            </div>
            
            <div id="contact2" class="contentbox2">
            <h3>Contact</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
            </div>
      
         </div>         
         
      
      
      <div id="nav2">
         <ul>
            <li ><a class="active" href="#" onClick="goto2('#about2', this); return false">About</a></li>
            <li><a href="#" onClick="goto2('#work2', this); return false">Work</a></li>
            <li><a href="#" onClick="goto2('#contact2', this); return false">Contact</a></li>
         </ul>
      </div>
      
      
      
         
   
    
   </body>

</html>
Por unasemana
Claber
166 de clabLevel
Envíale un mensaje privado
Venezuela
multiples jquery solo funciona 1

Escribe una respuesta rapida
