DIV沒有在我的網站工作

這是我的代碼DIV沒有在我的網站工作

$(function() { 
    $("#product_content").hide(); 

    $("#about").on("click", function() { 
    $("#home_content").hide(); 
    $('#product_content').show("slide", { direction: "right" }, 1000); 
    }); 
});

當我點擊它會顯示滑動效果不是爲我工作content.but我包括這jQuery的用戶界面

<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

這是我的HTML code.in菜單當我點擊關於我們就會加載頁面，但滑動效果不工作。

<div id="wrapper"> 

    <header> 
    <div class="topheader"> 
     <i class="fa fa-bars" aria-label="Skip to main navigation" aria-hidden="true" id="open-menu"></i> 
     <div id="dd-menu" class="dd-menu level-1" data-button="#open-menu"> 
      <div class="dd-menu-header"> 
       <button class="dd-menu-prev">&larr;</button> 
       <a class="dd-menu-title logo1"><img src="img/logoh.png"/></a> 
       <div class="dd-menu-close"><img class="dd-menu-close" src="images/close.png"></div> 
      </div> 



      <div class="dd-menu-section"></div> 
      <div class="dd-menu-items-container"> 
       <div class="dd-menu-items open"> 
       <div class="dd-menu-item link"> 
        <a href="index.html" id="home"> 
        </i><b>HOME</b></a> 
       </div> 
       <div class="dd-menu-item link" id="about"> 
        <a href="#" data-submenu="submenu-one"><b>ABOUT US</b></a> 
       </div> 
       <div class="dd-menu-item link"> 
        <a href="#"><b>INFRASTRUCTURE</b></a> 
       </div> 
       <div class="dd-menu-item link"> 
        <a href="#" id="product"><b>PRODUCTS</b></a> 
         <ul class="sub-menu"> 
          <a href="product.php">FIBER FLOOR MAT</a> 
          <a href="#">PPF FLOOR MAT</a> 
          <a href="#">JUTE FLOOR MAT</a> 
          <a href="#">RUBBER FLOOR MAT</a> 
          <a href="#">COIR FLOOR MAT</a> 
         </ul> 
       </div> 
       <div class="dd-menu-item link"> 
        <a href="#"><b>KNOWLEDGE CENTER</b></a> 
       </div> 
       <div class="dd-menu-item link"> 
        <a href="#"><b>CONTACT US</b></a> 
       </div> 
        <ul class="clearfix horizontal_list social_icons" style="list-style-type: none;padding-top: 27%;padding-left: 27%;"> 
        <li class="facebook m_bottom_5 relative"> 
         <span class="tooltip tr_all_hover r_corners color_dark f_size_small">Facebook</span> 
         <a href="https://www.facebook.com/" class="r_corners t_align_c tr_delay_hover f_size_ex_large"> 
         <i class="fa fa-facebook"></i> 
         </a> 
        </li> 
        <li class="twitter m_left_5 m_bottom_5 relative"> 
         <span class="tooltip tr_all_hover r_corners color_dark f_size_small">Twitter</span> 
         <a href="https://twitter.com/" class="r_corners f_size_ex_large t_align_c tr_delay_hover"> 
         <i class="fa fa-twitter"></i> 
         </a> 
        </li> 
        <li class="google_plus m_left_5 m_bottom_5 relative"> 
         <span class="tooltip tr_all_hover r_corners color_dark f_size_small">Twitter</span> 
         <a href="https://plus.google.com/" class="r_corners f_size_ex_large t_align_c tr_delay_hover"> 
         <i class="fa fa-google-plus"></i> 
         </a> 
        </li> 



       </ul> 

       </div> 
      </div> 
     </div> 
     <div class="logo"><a href="index.html"><img src="img/logoh.png"></a> 
     </div> 
    </div> 

    </header> 
    <!-- /header --> 

    <div id="home_content"> 
    <div id="main_slider" class="owl-carousel owl-theme"> 

    <li class="col-md-12 col-sm-12 col-xs-12" style="background-image: url(images/people.jpeg);background-size: cover;background-position: center center; margin-top: 80px; height: 580px;list-style: none; padding-left: 0%" alt="Cinelli"> 
    <div class="transparent_1"><h2 class="mycontent content1">OMEGA RUBBER PRODUCTS</h2> 
     <div> 
      <p class="sldrcontent">Omega manufactures a complete line of production solutions<br>that meet the strict demands of today's marketplace</br> </p> 
     </div> 
     <div> 
<a class="menu_open"> <button name="button" id="open-menu" class="btt3 btt32 btt-responsive">MORE</button></a> 
</div> 
    </div> 
    </li> 
    <li class="col-md-12 col-sm-12 col-xs-12" style="background-image: url(images/cinelli-front.jpeg); background-size: cover;background-position: center center;margin-top: 80px; height: 580px;list-style: none;padding-left: 0%" alt="Cinelli"><div class="transparent_1"><h2 class="mycontent content2">OMEGA FLOOR MATS<span style="color:transparent;">j</span></h2> 
    <div> 
<p class="sldrcontent">Every step that we take is a step forward based on our Quality Management System</br></p> 
    </div> 
    <div> 
<a class="menu_open"> <button name="button" id="open-menu" class="btt3 btt32 btt-responsive">MORE</button></a> 
</div> 
</div> 
</li> 
<li class="col-md-12 col-sm-12 col-xs-12" style="background-image: url(images/surly13.png);background-size: cover;background-position: center center;margin-top: 80px; height: 580px;list-style: none;padding-left: 0%" alt="Cinelli"><div class="transparent_1"><h2 class="mycontent content3">HIGH-TECH INFRASTRUCTURE</h2> 
<div> 
<p class="sldrcontent">With great envision Omega quickly adapt the latest technologies and<br> deliver functionally superior products</br></p></div> 
    <div> 
<a class="menu_open"> <button name="button" id="open-menu" class="btt3 btt32 btt-responsive">MORE</button></a> 
</div> 
</div> 
</li> 


</div> 
</div> 
<div id="product_content"> 
<div id="product_slider" class="owl-carousel owl-theme"> 
    <img src="images/IMG1.jpg"> 
    <img src="images/IMG2.jpg"> 
    <img src="images/IMG3.jpg"> 
    <img src="images/IMG4.jpg"> 
    <img src="images/IMG5.jpg"> 
</div>

來源

2017-06-14 user94

哪來的HTML代碼？也......似乎一切工作......看到這裏> http://jsfiddle.net/PjSV7/69/共享所有相關的代碼（HTML和CSS）可能有問題 –

，但它顯示錯誤「 Uncaught TypeError：b.easing [this.easing]不是一個函數「 – user94

jquery UI js問題...嘗試使用最新的jquery和jquery ui js。我試着用最新的js和你的代碼工作！ –

$(document).ready(function() { 
 
$("#product_content").hide(); 
 
    $("#about").on("click", function() { 
 
    $("#home_content").hide(); 
 
    $('#product_content').show("slide", { direction: "right" }, 2000); 
 
    }); 
 
});

<html> 
 

 
    <head> 
 
     <script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> \t \t 
 
     <script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> \t \t 
 
    </head> 
 
\t 
 
    <body> 
 
<p id="product_content">By default hidden</p> 
 
\t \t <p id="home_content">home_content</p> 
 
     
 
     <button id = "about"> about</button> 
 
    
 
     <div class = "target"> 
 
     </div> 
 
    
 
    </body> 
 
\t 
 
</html>

希望它會幫助你

來源

2017-06-14 08:59:44

DIV沒有在我的網站工作

回答

相關問題