我正在使用Tab Slide Out jQuery插件：http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/并尝试在页面的不同侧面制作多个标签。我需要一些帮助！当我这样做时，它们都不会出现或起作用。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<script src="js/jquery.tabSlideOut.v1.3.js"></script>
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle_fist', //class of the element that will be your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
imageHeight: '122px', //height of tab image
imageWidth: '40px', //width of tab image
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div-apps').tabSlideOut({
tabHandle: '.handle_second', //class of the element that will be your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
imageHeight: '122px', //height of tab image
imageWidth: '40px', //width of tab image
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<style>
.slide-out-div {
padding: 20px;
width: 250px;
background: #f2f2f2;
border: #29216d 2px solid;
}
.slide-out-div-apps {
padding: 20px;
width: 250px;
background: #f2f2f2;
border: #29216d 2px solid;
}
</style>
</head>
<body>
<div class="slide-out-div">
<a class="handle_first" href="http://link-for-non-js-users">Content</a>
<p>Here you can find all the information you need about Volunteering at the Mary Rigg Neihborhood Community Center. Hover over the main enterance to enter the Community Center. You will be guided through the center using arrows. Check out different volunteer opportunities in each room. Roam the halls as if you were really there!</p>
</div>
<div class="slide-out-div-apps">
<a class="handle_second" href="http://link-for-non-js-users">Content</a>
<p>Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center. Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows. Check out different volunteer opportunities in each room. Roam the halls as if you were really there!</p>
</div>
</body>
</html>
答案 0 :(得分：0)
在FF和IE9中测试过 - 在两者中都可以正常工作。我确实改变了插件的路径并重新命名它以进行测试 - 所以将它重新命名为它应该是什么。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.slide-out-div{
padding: 20px;
width: 250px;
background: #f2f2f2;
border: #29216d 2px solid;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="tabSlideOut.js"></script>
<script>
$(document).ready(function(){
$('#slide-out-div1').tabSlideOut({
tabHandle: '.handle1', //class of the element that will be your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
imageHeight: '122px', //height of tab image
imageWidth: '40px', //width of tab image
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
leftPos: '20px',
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('#slide-out-div2').tabSlideOut({
tabHandle: '.handle2', //class of the element that will be your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
imageHeight: '122px', //height of tab image
imageWidth: '40px', //width of tab image
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '324px', //position from the top
leftPos: '20px',
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
</head>
<body>
<div id="slide-out-div1" class="slide-out-div">
<a class="handle1" href="http://link-for-non-js-users">Content</a>
<p>
Here you can find all the information you need about Volunteering at the Mary Rigg Neihborhood Community Center.
Hover over the main enterance to enter the Community Center. You will be guided through the center using arrows.
Check out different volunteer opportunities in each room. Roam the halls as if you were really there!
</p>
</div>
<div id="slide-out-div2" class="slide-out-div">
<a class="handle2" href="http://link-for-non-js-users">Content</a>
<p>
Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center.
Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows.
Check out different volunteer opportunities in each room. Roam the halls as if you were really there!
</p>
</div>
</body>
</html>