Javascript 如何消除两个jQuery插件之间的冲突？
我正在使用SpryTabbedAssets插件和垂直滑块选项卡插件。 当我单独运行使用插件时，它们工作得很好，但是当我同时使用这两个插件时，我遇到了一个问题。 垂直滑块选项卡未显示当我将鼠标悬停在使用垂直滑块选项卡的其中一个选项卡上时应该显示的内容。 我将发送错误的屏幕截图供您参考。。Javascript 如何消除两个jQuery插件之间的冲突？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用SpryTabbedAssets插件和垂直滑块选项卡插件。 当我单独运行使用插件时，它们工作得很好，但是当我同时使用这两个插件时，我遇到了一个问题。 垂直滑块选项卡未显示当我将鼠标悬停在使用垂直滑块选项卡的其中一个选项卡上时应该显示的内容。 我将发送错误的屏幕截图供您参考。。 家 $（文档）.ready（函数（）{ $（“#textExample”）.verticaltabs（{speed:500，slideShow:false，activeIndex:2}）； }); $（文档）
家
$（文档）.ready（函数（）{
$（“#textExample”）.verticaltabs（{speed:500，slideShow:false，activeIndex:2}）；
});
$（文档）.ready（函数（）{
$（'#a1'）.css（“颜色”、“红色”）；
$（'#a2'）.css（“颜色”、“黑色”）；
$（'#a3'）.css（“颜色”、“黑色”）；
$（'#a4'）.css（“颜色”、“黑色”）；
$（'#a1'）.css（“背景色”、“粉色”）；
$（'#a2'）.css（“背景色”、“粉色”）；
$（'#a3'）.css（“背景色”、“粉色”）；
$（'#a4'）.css（“背景色”、“粉色”）；
$（'.verticalslider_contents li'）.css（“背景色”、“粉色”）；
});
$（文档）.ready（函数（）{
$（“#a1”）。单击（函数（）{
$（'#a1'）.css（“颜色”、“红色”）；
$（'#a2'）.css（“颜色”、“黑色”）；
$（'#a3'）.css（“颜色”、“黑色”）；
$（'#a4'）.css（“颜色”、“黑色”）；
$（'#a1'）.css（“背景色”、“粉色”）；
$（'#a2'）.css（“背景色”、“粉色”）；
$（'#a3'）.css（“背景色”、“粉色”）；
$（'#a4'）.css（“背景色”、“粉色”）；
$（'.verticalslider_contents li'）.css（“背景色”、“粉色”）；
});
});
$（文档）.ready（函数（）{
$（“#a2”）。单击（函数（）{
$（'#a1'）.css（“颜色”、“黑色”）；
$（'#a2'）.css（“颜色”、“红色”）；
$（'#a3'）.css（“颜色”、“黑色”）；
$（'#a4'）.css（“颜色”、“黑色”）；
$（'#a1'）.css（“背景色”、“天蓝色”）；
$（'#a2'）.css（“背景色”、“天蓝色”）；
$（'#a3'）.css（“背景色”、“天蓝色”）；
$（'#a4'）.css（“背景色”、“天蓝色”）；
$（'.verticalslider_contents li'）.css（“背景色”、“天蓝色”）；
});
});
$（文档）.ready（函数（）{
$（“#a3”）。单击（函数（）{
$（'#a1'）.css（“颜色”、“黑色”）；
$（'#a2'）.css（“颜色”、“黑色”）；
$（'#a3'）.css（“颜色”、“红色”）；
$（'#a4'）.css（“颜色”、“黑色”）；
$（'#a1'）.css（“背景色”、“黄色”）；
$（'#a2'）.css（“背景色”、“黄色”）；
$（'#a3'）.css（“背景色”、“黄色”）；
$（'#a4'）.css（“背景色”、“黄色”）；
$（'.verticalslider_contents li'）.css（“背景色”、“黄色”）；
});
});
$（文档）.ready（函数（）{
$（“#a4”）。单击（函数（）{
$（'#a1'）.css（“颜色”、“黑色”）；
$（'#a2'）.css（“颜色”、“黑色”）；
$（'#a3'）.css（“颜色”、“黑色”）；
$（'#a4'）.css（“颜色”、“红色”）；
$（'#a1'）.css（“背景色”、“海蓝宝石”）；
$（'#a2'）.css（“背景色”、“海蓝宝石”）；
$（'#a3'）.css（“背景色”、“海蓝宝石”）；
$（'#a4'）.css（“背景色”、“海蓝宝石”）；
$（'.verticalslider_contents li'）.css（“背景色”、“海蓝宝石”）；
});
});
$（函数（）{
$（“#1”）.拉瓦兰灯({
外汇：“退出”，
速度:900,，
单击：函数（事件、菜单项）{
返回false；
}
});
});
$（文档）.ready（函数（）{
$（“#tab1”）.hover（函数（）{
var高度=1000；
$（“#主要内容”）。高度（高度）；
});
$（“#tab2”）.hover（函数（）{
var高度=1400；
$（“#主要内容”）。高度（高度）；
});
$（“#tab3”）.hover（函数（）{
var高度=1450；
$（“#主要内容”）。高度（高度）；
});
});
/*$（'.feature'）.live（'mouseover'，function（）{
警报（“hi”）；
});
*/
$（文档）.ready（函数（）{
$（“.feature”）.bind（'mouseover'，function（）{
$（'.feature-strong'）.attr（'class'，''）；
$（“#”+$（this.attr（'id'）+“strong”）.attr（'class'，'active'）；
$（'特征'u in'）。淡出（160）；
setTimeout（“$”（“#feature_in”）.html（“+$（this.html（）+”）.fadeIn（160）；”，160）；
if（$（this.attr（'id'）=='1'））
var-pt=-20；
其他的
var pt=（$（this）.attr（'id'）-1）*43+3；
$（“#feature_out”）.stop（）.animate（{marginTop:pt+'px'}，{duration:320}）；
});
});
函数showUser（str）{
变量过滤器=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
如果（！过滤器测试（str））{
$（“#结果”）.text（'请提供有效的电子邮件地址'）；
str.focus；
返回false；
}
}
函数ValidateEmail（）
{
var emailID=document.frmmailliglist.txtEmail
if（（emailID.value==null）| |（emailID.value==“”）
{
$（“#结果”）.text（'请输入EmailID'）；
emailID.focus（）
返回错误
}
else if（showUser（emailID.value）==false）{
emailID.value=“”
emailID.focus（）
返回错误
}
返回真值
}
函数scriptCall（）{
如果（（屏幕宽度320））{
}
}
什么是myTransAlert
一款免费移动应用程序，旨在简化您的日常通勤。此应用程序消除了您浪费的时间
<!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>