正如标题所暗示的那样。基本上,我从网上下载了一个不错的手风琴模板,但是当我将它添加到我的网站时,它不起作用。我遵循了他们的文档,并设法让它在一个单独的空 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>