我正在使用 SpryTabbedAssets 插件和垂直滑块选项卡插件。当我单独运行插件时，它们工作正常，但是当我同时使用这两个插件时，我遇到了问题。垂直滑块选项卡未显示当我将光标悬停在我使用垂直滑块选项卡的选项卡之一上时应该显示的内容。供您参考，我正在发送错误的屏幕截图..
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width" />
<title>Home</title>
<link rel="icon" type="image/x-icon" href="res/favicon.png" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--<link rel="stylesheet" type="text/css" media="only screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />-->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="mdpi.css" />
<!--<link rel="stylesheet" type="text/css" media="only screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width:980px)" href="../Example/Slideshow/screen-style.css" />-->
<script type="text/javascript" src="js/jQuery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
<link rel="stylesheet" href="verticaltabs.css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
$(document).ready(function(){
$("#textExample").verticaltabs({speed: 500,slideShow: false,activeIndex: 2});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#a1').css("color", "red");
$('#a2').css("color", "black");
$('#a3').css("color", "black");
$('#a4').css("color", "black");
$('#a1').css("background-color", "pink");
$('#a2').css("background-color", "pink");
$('#a3').css("background-color", "pink");
$('#a4').css("background-color", "pink");
$('.verticalslider_contents li').css("background-color", "pink");
});
$(document).ready(function(){
$("#a1").click(function(){
$('#a1').css("color", "red");
$('#a2').css("color", "black");
$('#a3').css("color", "black");
$('#a4').css("color", "black");
$('#a1').css("background-color", "pink");
$('#a2').css("background-color", "pink");
$('#a3').css("background-color", "pink");
$('#a4').css("background-color", "pink");
$('.verticalslider_contents li').css("background-color", "pink");
});
});
$(document).ready(function(){
$("#a2").click(function(){
$('#a1').css("color", "black");
$('#a2').css("color", "red");
$('#a3').css("color", "black");
$('#a4').css("color", "black");
$('#a1').css("background-color", "skyblue");
$('#a2').css("background-color", "skyblue");
$('#a3').css("background-color", "skyblue");
$('#a4').css("background-color", "skyblue");
$('.verticalslider_contents li').css("background-color", "skyblue");
});
});
$(document).ready(function(){
$("#a3").click(function(){
$('#a1').css("color", "black");
$('#a2').css("color", "black");
$('#a3').css("color", "red");
$('#a4').css("color", "black");
$('#a1').css("background-color", "yellow");
$('#a2').css("background-color", "yellow");
$('#a3').css("background-color", "yellow");
$('#a4').css("background-color", "yellow");
$('.verticalslider_contents li').css("background-color", "yellow");
});
});
$(document).ready(function(){
$("#a4").click(function(){
$('#a1').css("color", "black");
$('#a2').css("color", "black");
$('#a3').css("color", "black");
$('#a4').css("color", "red");
$('#a1').css("background-color", "Aquamarine ");
$('#a2').css("background-color", "Aquamarine ");
$('#a3').css("background-color", "Aquamarine ");
$('#a4').css("background-color", "Aquamarine ");
$('.verticalslider_contents li').css("background-color", "Aquamarine ");
});
});
</script>
<script type="text/javascript">
$(function() {
$("#1").lavaLamp({
fx: "backout",
speed: 900,
click: function(event, menuItem) {
return false;
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#tab1").hover(function(){
var height = 1000;
$('#main-content').height(height);
});
$("#tab2").hover(function(){
var height = 1400;
$('#main-content').height(height);
});
$("#tab3").hover(function(){
var height = 1450;
$('#main-content').height(height);
});
});
</script>
<script type="text/javascript">
/* $('.feature').live('mouseover',function() {
alert('hi');
});
*/
$(document).ready(function(){
$(".feature").bind('mouseover',function(){
$('.feature strong').attr('class', '');
$("#"+$(this).attr('id')+" strong" ).attr('class', 'active');
$('#feature_in').fadeOut(160);
setTimeout("$('#feature_in').html('"+$(this).html()+"').fadeIn(160);",160);
if($(this).attr('id')=='1')
var pt = -20;
else
var pt = ($(this).attr('id')-1) * 43 + 3;
$("#feature_out").stop().animate({marginTop:pt+'px'},{duration:320});
});
});
</script>
<script type="text/javascript">
function showUser(str) {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(str)) {
$("#result").text('Please provide a valid Email Address');
str.focus;
return false;
}
}
function ValidateEmail()
{
var emailID = document.frmmailinglist.txtEmail
if ((emailID.value==null)||(emailID.value==""))
{
$("#result").text('Please enter EmailID');
emailID.focus()
return false
}
else if (showUser(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
</script>
<script type="text/javascript">
function scriptCall() {
if((screen.width<480) && (screen.width>320)) {
}
}
</script>
</head>
<body style="font-family:Centaur;"; onLoad="scriptCall()">
<div id="head-section">
<div id="header">
<!-- <div id="title">
MyTransAlert
</div>-->
<!-- <div id="logo">
<a href="index.html"><img src="res/logo.png" width="150" height="150" alt="MTA" /></a>
</div> -->
<div id="navbar">
<ul class="lavaLampWithImage" id="1">
<li><a href="index.html"><img class="mm" src="res/1.png" width="300" height="60" alt="home" onClick="location.href='index.html'"/></a></li>
<li class="current"><a href="index.html"><img class="mm" src="res/Home-n.png" width="120" height="60" alt="home" onClick="location.href='index.html'"/></a></li>
<li><a href="http://eywaz.com/sit2/MTA-2Website21-02/mta"><img class="mm" src="res/blog.png" width="120" height="60" alt="contact us" onClick="location.href='http://eywaz.com/sit2/MTA-2Website21-02/mta'"/></a></li>
<li><a href="help.html"><img class="mm" src="res/Help-n.png" width="120" height="60" alt="about us" onClick="location.href='help.html'"/></a></li>
<li><a href="contactus.html"><img class="mm" src="res/Contact_us-n.png" width="120" height="60" alt="contact us" onClick="location.href='contactus.html'"/></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div id="main-content">
<br />
<!-- <img src="res/train.png" width="100%" height="670"></img> -->
<!-- <div id="train" style="background-image:url('res/train.png');background-repeat:no-repeat;background-position:center top;"> -->
<div id="slideshow">
<ul class="slides">
<li class="sl"><img class="ss" src="image/a.png" width="191" height="278" alt="Splash Screen" /></li>
<li class="sl"><img class="ss" src="image/b.png" width="191" height="278" alt="Select Route" /></li>
<li class="sl"><img class="ss" src="image/c.png" width="191" height="278" alt="New Schedule" /></li>
<li class="sl"><img class="ss" src="image/d.png" width="191" height="278" alt="Created Routes" /></li>
<li class="sl"><img class="ss" src="image/e.png" width="191" height="278" alt="CR" /></li>
</ul>
<span class="arrow next"></span>
<span class="arrow previous"></span>
</div>
<p id="text"><a href="http://itunes.apple.com/ae/app/mytransalert/id542757147?mt=8&ls=1"><img id="appstore" src="res/download.png" width="300" height="100" /></a><br /><br />
<p id="cont">What is myTransAlert?</p>
<p id="cont2">A free mobile application designed to ease your daily commute. This app eliminates your time wasted waiting for a train or bus. With myTransAlert, know exactly when the next train or bus is arriving to your stop with real-time status updates and delays.</p>
<p id="cont">Its convenient!</p>
<p id="cont2">No need to open the app, visit a website or carry paper schedules. myTransAlert does all the work for you.</p>
<p id="cont">It's efficient!</p>
<p id="cont2">myTansAlert saves commuting time, and helps you get to your destination as quickly as possible.</b></p>
<p id="cont""><b>Your Transit Schedule. Real-Time Status. Personalized.</b></p>
<!-- </div> -->
<div class="clear"></div>
<!-- <div class="split"></div> -->
<wbr>
<div id="list">
<!--<div id="feature" style="font-size:30px">
<a href="#" style="padding-left:50px; padding-top:400px;"><b>Features</b></a>
<a href="#" ><b>Transit Authorities</b></a>
</div> -->
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li id="tab1" class="TabbedPanelsTab" tabindex="0" style="font-size:20px; padding-top:12px">Features </li>
<li id="tab2" class="TabbedPanelsTab" tabindex="0" style="z-index:999; font-size:20px; padding-top:12px">How to Use myTransAlert</li>
<li id="tab3" class="TabbedPanelsTab" tabindex="0" style="font-size:20px; padding-top:12px">Transit Authorities</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="feature_out" style="margin-top:-20px;"><div id="feature_exp"><div id="feature_in" style= "font-family='Centaur'"><strong>Automated Alerts</strong><div class="feature_info"><p style="text-align:center"; "font-family='Centaur'";>Create automated alerts for your favorite routes.</p></div></div></div></div>
<table border="0" width="350px" style="margin-left:10px;">
<tr>
<td width="15%" style="padding-left:55px;padding-top:15px;"><img src="res/automated_alert.gif" height="20" width="20"></img>
</td>
<td width="60%">
<div class="feature synotes_pencil" id="1" style="padding-left:10px; tex" ; ><strong>Automated alerts</strong><div class="feature_info"><p style="text-align:center; padding-bottom:20px" ; >Create automated alerts for your favorite routes.</p></div></div>
</td>
</tr>
<tr>
<td width="15%" style="padding-left:55px;padding-top:15px;"><img src="res/set_alert_distance.gif" height="20" width="20"></img>
</td>
<td width="60%">
<div class="feature synotes_sync" id="2" style="padding-left:10px;"><strong>Set alert distance</strong><div class="feature_info"><p style="text-align:center">Set the distance from the train station or bus stop where you would like to start receiving alerts.</p></div></div>
</td>
</tr>
<tr>
<td width="15%" style="padding-left:55px;padding-top:15px;"><img src="res/pick_your_transit.png" height="20" width="20"></img>
</td>
<td width="60%">
<div class="feature synotes_star" id="3" style="padding-left:10px;padding-bottom:5px;"><strong>Pick your transit authority</strong><div class="feature_info"><p style="text-align:center">Select your transit from the many supported to get alerted</p></div></div>
</td>
</tr>
<tr>
<td width="15%" style="padding-left:55px;padding-top:15px;"><img src="res/you_can_snooze.png" height="20" width="20"></img>
</td>
<td width="60%">
<div class="feature synotes_lock" id="4" style="padding-left:10px;"><strong>You can snooze</strong><div class="feature_info"><p style="text-align:center">Snooze the alert to the latest schedule if you decide to take a later train or bus.</p></div></div>
</td>
</tr>
<tr>
<td width="15%" style="padding-left:55px;padding-top:15px;"><img src="res/Get_up_to_date.png" height="20" width="20"></img>
</td>
<td width="60%">
<div class="feature synotes_cloud" id="5" style="padding-left:10px;padding-bottom:40px;"><strong>Real Time status on your ride</strong><div class="feature_info"><p style="text-align:center">myTransAlert provides up-to-date status of your train and bus.</p></div></div>
</td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<div id="wrapper">
<!-- Text Example -->
<div name class="verticalslider" id="textExample">
<ul class="verticalslider_tabs">
<li><a href="#" id="a1">New Alerts</a></li>
<li><a href="#" id="a2">My Alerts</a></li>
<li><a href="#" id="a3">My Schedule</a></li>
<li><a href="#" id="a4">Near Me</a></li>
</ul>
<ul class="verticalslider_contents">
<li>
<p>Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo. Vestibulum et rhoncus tellus. Curabitur mauris enim, vehicula sit amet euismod a, eleifend at dui. Vivamus sollicitudin, nunc pharetra porttitor lobortis, felis odio hendrerit mi, id ultricies urna enim quis lectus. Suspendisse convallis ipsum egestas velit fermentum ac volutpat dui dictum. Pellentesque sed ultrices justo. Ut lacus odio, porttitor quis tincidunt at, imperdiet vel eros. Duis ac velit neque. Integer semper egestas odio id suscipit. Maecenas eu diam in urna fringilla viverra eget sit amet ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>Overflow Content</h2>
<p>Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.</p></td>
</li>
<li>
<h2>Praesent Pulvinar</h2>
<p>From the Spry tab on the Insert panel, choose the first item in the third group (the ... You can choose to create a horizontal or vertical menu. ... The first column is the main menu, the second column a submenu of the main menu, and so forth.From the Spry tab on the Insert panel, choose the first item in the third group (the ... You can choose to create a horizontal or vertical menu. ... The first column is the main menu, the second column a submenu of the main menu, and so forth.</p>
<h2>ABCDEFGH</h2>
<p>From the Spry tab on the Insert panel, choose the first item in the third group (the ... You can choose to create a horizontal or vertical menu. ... The first column is the main menu, the second column a submenu of the main menu, and so forth.From the Spry tab on the Insert panel, choose the first item in the third group (the ... You can choose to create a horizontal or vertical menu. ... The first column is the main menu, the second column a submenu of the main menu, and so forth.From the Spry tab on the Insert panel, choose the first item in the third group (the ... You can choose to create a horizontal or vertical menu. ... The first column is the main menu, the second column a submenu of the main menu, and so forth.</p>
</li>
<li>
<h2>Nunc Adipiscing</h2>
<p>The Tabs dialog box snaps to the top of the column that includes the selection or the insertion point. To the top ... Add tabs in the paragraphs where you want to add horizontal space. (You can ... In the Tabs panel, select a tab stop on the ruler.More results for how to add third column in vertical tabbed panel In the Tabs panel, select a tab stop on the ruler.More results for how to add third column in vertical tabbed panel In the Tabs panel, select a tab stop on the ruler.More results for how to add third column in vertical tabbed panel</p>
<h2>Overflow Content</h2>
<p>Prant puinar, um erat vestulum lacus, in sodales lorem mi in leo.Prat puinar, lorem nec ullrper semper, ipsum vestibum lacus, in sodales lorem mi in leo.Praent pu000000000nar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.</p>
</li>
<li>
<h2>Praesent Dapibus</h2>
<p>Adding a Tabbed Panel widget to display multiple containers on a single page ... Tabbed Panel, the second click selects the Tab Container, and the third click selects ... the Tabbed Panel widget on the page, near the top and centered vertically. .... Duplicate the existing text frame, to create a second column on the right side.Adding a Tabbed Panel widget to display multiple containers on a single page ... Tabbed Panel, the second click selects the Tab Container, and the third click selects ... the Tabbed Panel widget on the page, near the top and centered vertically. .... Duplicate the existing text frame, to create a second column on the right side.</p>
<h2>Overflow Content</h2>
<p>lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo. lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo. lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="TabbedPanelsContentA">
<table border="1">
<tr height="40px" align="center"><td ><b>Supported Transit Authorities</b></td><td width="35%"><b>Name</b></td><td><b>Supported Mode</b></td><td width="10 %"><b>Schedule Information</b></td><td width="5%"><b>Real-time Status & Alerts</b></td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/New york city subway.png"></td><td>New York Metro Transit Authority</td><td><img src="TA/subway.png" width="40" height="35"><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td><img src="TA/right.png"></td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/metro1.png"></td><td>Washington Metropolitan Area Transit Authority</td><td><img src="TA/subway.png" width="40" height="35"><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td><img src="TA/right.png"></td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/T.png"></td><td>Massachusetts Bay Transportation Authority</td><td><img src="TA/subway.png" width="40" height="35"><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td><img src="TA/right.png"></td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/cta.png"></td><td>Chicago Transit Authority</td><td><img src="TA/subway.png" width="40" height="35"><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td><img src="TA/right.png"></td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/bart.png"></td><td>Bay Area Rapid Transit</td><td><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td><img src="TA/right.png"></td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/Metro.png"></td><td>Los Angeles County Metropolitan Transportation Authority</td><td><img src="TA/subway.png" width="40" height="35"><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td>-</td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/Transit.png"></td><td>New Jersey Transit Corporation</td><td><img src="TA/subway.png" width="40" height="35"><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td>-</td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/path.png"></td><td>Port Authority Trans-Hudson Corporation</td><td><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td>-</td></tr>
<tr align="center"><td valign="center" style="padding-top:6px;"><img src="TA/SEPTA.png"></td><td>Southeastern Pennsylvania Transporation Authority</td><td><img src="TA/subway.png" width="40" height="35"><img src="TA/bus.png" width="30" height="35"></td><td><img src="TA/right.png"></td><td>-</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<ul id="site-footer">
<li class="foot"><a href="help.html"><img src="res/help_ico.png" alt="About us" width="150" height="150" style="margin-left:15px;back"/><br/><b id="us1"><font family="Centaur";style="margin-left:-5px;" color="#525252" size="+1">Help</font></b></a></li>
<li class="foot"><a href="contactus.html"><img src="res/contactus_ico.png" alt="Second Image" width="150" height="150" style="margin-left:15px;"/><br /><b id="us2"><font color="#525252" style="margin-left:-10px;" size="+1">Contact</font></b></a></li>
<li class="foot"><a href="https://www.facebook.com/myTransAlert"><img src="res/facebook_ico.png" alt="Follow us on Facebook" width="150" height="150" style="margin-left:15px;"/><br /><b id="fb"><font color="#525252" style="margin-left:35px;" size="+1">Facebook</font></b></a></li>
<li class="foot"><a href="https://www.twitter.com/myTransAlert"><img src="res/twitter_ico.png" alt="Follow us on Twitter" width="150" height="150" style="margin-left:15px;"/><br /><b id="tweet"><font color="#525252" style="margin-left:35px;" size="+1">Twitter</font></b></a></li>
</ul>
<div class="clear"></div>
<div id="mailing-list">
<p id="ip">Join our mailing list for the latest <strong>myTransAlert</strong> news
<div id="sect">
<form name="frmmailinglist" action="sendmailinglist.php" method="POST">
<input id="txtHint" name="txtEmail" type="text" placeholder=" eMail ID"/>
<input class="send" id="btn3" type="submit" value="Submit" Onclick="return ValidateEmail()" /><p id="result"></p>
</form>
</div>
</p>
</div>
<div class="clear"></div>
<br/>
<p id="copyright">Copyright anOrigin ©2013 All rights reserved!!<br />
<img src="res/eywa.png" height="16" width="100" alt="Powered by Eywa" style="position:relative;"/></p>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
<script src="js/script.js"></script>
</body>
</html>
如果您想要 CSS 和 js 以供进一步参考，我也可以提供它们...
我尝试了很多谷歌和技巧，但找不到原因..请帮我解决这个问题...在此先感谢...