Question

正如标题所暗示的那样。基本上，我从网上下载了一个很好的手风琴模板，但当我将它添加到我的网站时，它不起作用。我跟着他们的文档，设法让它在一个单独的，空的html文档中工作，但在我自己的网站上没有运气。

这是我的代码，对不起有多糟糕，我是新来的......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<style type="text/css">
@import url("SILXCSS.css");
</style>
<title>Silx</title>
<script type="text/javascript">
// <![CDATA[
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// ]]>
</script>
    <link rel="Stylesheet" type="text/css" href="css/evoslider.css" />
    <link rel="Stylesheet" type="text/css" href="css/default/default.css" />

    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="scripts/jquery.evoslider.lite-1.1.0.js">
</script>
<style type="text/css">
div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
        z-index: 10;
    }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }
</style>
<!-- InstanceBeginEditable name="head" -->

<!-- InstanceEndEditable -->
</head>



<body>
    <div id="header">
      <div id="logo">
            <h1> 
                … 
            </h1>
      <div class="fadehover">
        <a href="index.html"><img src="images/logo.gif" alt="" class="a" /></a>
        <a href="index.html"><img src="images/logo2.gif" alt="" class="b" /></a>

      </div>
</div>      
    </div>
    <div id="navbar">
                <ul id="menu">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="activities.html">Activities</a>
          </li>
          <li><a href="partners.html">Partners</a></li>
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="http://silx.boards.net/">Forum</a></li>
        </ul>
    </div>
    <div id="page" class="container">
      <div id="content">
        <div id="onecolumn"><!-- InstanceBeginEditable name="EditRegion3" -->
            <div id="mySlider" class="evoslider default">    
                <dl>

                    <dt>slide one</dt>
                    <dd data-src="image1.jpg" data-thumb="image1-thumb.jpg">
                    </dd>

                    <dt>slide two</dt>
                    <dd data-src="image2.jpg" data-thumb="image2-thumb.jpg">
                    </dd>

                    <dt>slide three</dt>
                    <dd data-src="image3.jpg" data-thumb="image3-thumb.jpg">
                    </dd>

                    <dt>slide four</dt>
                    <dd data-src="image4.jpg" data-thumb="image4-thumb.jpg">
                    </dd>  

                </dl>
            </div>
        <script type='text/javascript'>
            var myEvoSlider = $("#mySlider").evoSlider();
        </script> 
        <!-- InstanceEndEditable --></div>
        </div>
    </div>



<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
    function() 
    {       $(this).stop().animate({"opacity": "0"}, "slow");                           },
    function() 
    {
        $(this).stop().animate({"opacity": "1"}, "fast");
    });

});

      $(document).ready(function() {
        $("#menu > li:has(ul)").mouseenter(function(){
          $(this).children("ul").css("display", "none");
          $(this).children("ul").css("left", "auto").fadeIn('slow');
        }).mouseleave(function(){
          $(this).children("ul").delay(300).fadeOut('fast', function() {
            $(this).children("ul").css("left", "-9999em");
          });
        });
      });

$("ul#menu > li").fadeTo("slow", 0.6);
$("ul#menu > li").hover(
    function() { $(this).fadeTo("slow", 1.0); },
    function() { $(this).fadeTo("slow", 0.5); }
);




function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});
</script>
<script type='text/javascript' src='jquery-1.10.1.min.js'></script>      
</body>
<!-- InstanceEnd --></html>

Answer 1

<script type='text/javascript' src='jquery-1.10.1.min.js'></script>

和

JQuery Accordion不工作，Item显示但不会动画

1 个答案: