我正在为一个以前构建的模块编辑XHTML/CSS,该模块可以作为新闻播报器使用。我没有一个滚动的链接列表,而是添加了选项卡,这样用户就可以在一个链接列表和另一个列表之间点击。我还添加了一个下拉菜单,其中包含用户所在的相应选项卡的所有链接列表
我为模块创建了一个不起作用的模板,以传递给开发团队。所有XHTML/CSS元素都存在,但为了使选项卡/下拉菜单正常工作,没有附加JS(我不负责后端代码)。我的本地示例显示了模块的基本状态,以及带有下拉菜单的状态。在我的本地示例中,所有链接都可以工作,包括模块的"拉链"部分和下拉列表。
但是,在运行站点的上下文中(在后端开发添加选项卡和下拉功能之后),zipper内部的链接不起作用,下拉列表中的第一个链接(此链接与zipper重叠)也不起作用。我所说的不工作是指它们是可点击的,路径是可见的,但它们什么都不做。下拉框中的所有其他链接(它们不与拉链部分重叠)。
虽然我倾向于相信这是一个JS错误,但我无法知道这一点。我使用JS的唯一经验是通过jQuery,我们根本不使用jQuery。
我的问题是,我能做些什么来帮助这种情况吗?有人在我的代码中看到任何引起危险信号或我可以更改的内容吗?
他们确实要求我添加一些CSS行,以便在页面上定位隐藏的div。我答应了,这个问题似乎已经解决了一段时间。然后我添加了一个背景图像和一个颜色变化。根据开发团队的说法,这导致了问题再次发生,所以我担心我的代码中遗漏了一些我犯了严重错误的东西。然而,我不能确定,因为我没有JS的经验,也没有后端团队在做什么。
我主要在寻找一些帮助,比如我的代码可能有什么问题,我如何添加或删除部分代码以提供帮助,或者我的代码是否正常,实际上存在JS错误。
我附加了下拉状态的XHTML(我没有构建原始模块,在这一点上重建XHTML几乎是完全不可能的)和CSS(针对整个模块,而不仅仅是选项卡/下拉列表)。
提前谢谢你,我为这个冗长的问题道歉,但我认为所有信息都可能有帮助。
CSS
.newsTickerContainer {position:relative; z-index:1;}
.newsTicker {
display:block;
background-color:white;
position:relative;
border-bottom:1px dotted #000;
margin-bottom:10px; height:55px;
line-height:25px;
overflow:hidden;
}
.newsTicker h4 {
float:left;
padding:0 4px 0px 8px;
margin:0;
z-index:1;
position:relative;
background-color:#FFFFFF;
font-weight:bold;
font-size:1.1em;
color:#444;
text-transform:uppercase;
}
.newsTicker .nav-inline {
float:left;
padding:0;
margin:0;
background-color:#FFFFFF;
z-index:19;
position:relative;
}
.newsTicker ul.arrows{
margin-left:0;
padding:0px 4px 6px 6px;
position:relative;
z-index:10px;
background-color:#fff;
right:auto;
}
.newsTicker ul.arrows .next a
{
background: url(../img/next_arrow.gif) left top no-repeat;
margin-left: 2px;
}
.newsTicker ul.arrows .prev a
{
background: url(../img/prev_arrow.gif) left top no-repeat;
margin-left: 2px;
}
.newsTicker ul.arrows .prev a,
.newsTicker ul.arrows .next a
{
width:7px;
height:9px;
}
.newsTicker ul.arrows .next a:hover
{
background: url(../img/next_arrow.gif) left top no-repeat;
margin-left: 2px;
}
.newsTicker ul.arrows .prev a:hover
{
background: url(../img/prev_arrow.gif) left top no-repeat;
margin-left: 2px;
}
.newsTicker ul.newsItem {
width:20000px;
margin-left:28px;
position:relative;
padding-bottom:0;
top:0px;
left:0;
z-index:0;
}
.newsTicker ul.newsItem li {
width:546px;
float:left;
}
.newsTicker h3, .newsTicker .newsItem p {
font-family:arial,helvetica,sans-serif;
}
.newsTicker .newsItem p {
position:absolute;
font-size:12px;
}
.newsTicker ul.newsItem, .newsTicker ul.newsItem li{ padding-top:0px; margin-top:0px;}
.newsTicker .newsItem p a {color:#b10717; font-weight:bold; font-size:1.2em;}
.newsTicker .zippercontent {overflow:hidden; position:relative;}
.newsTicker div {display:block;}
.newsTicker .zipperhead { border-bottom:1px dotted #000; position:relative; padding: 0 4px;}
.newsTicker .zipperhead h4 {position:relative; color:#003366; font-weight:normal; padding:0 8px; cursor:pointer; top:1px}
.newsTicker .zipperhead h4:hover {color:#003366; font-weight:bold;}
.newsTicker .zipperhead h4.selected,.newsTicker .zipperhead h4.selected {float:right; z-index:40; width:70px; font-size:1em; text-align:center; }
.newsTicker .zipperhead h4.selected a.viewlink:hover, .newsTicker .zipperhead h4.selected a.viewlink:hover {color:#709fcf;}
.newsTicker .zipperhead h4.selected:hover {font-weight:normal;}
.newsTicker .zipperhead h4.activetab { background-color:#ffffff; border:1px dotted #000; border-bottom:none; color:#333333; }
.viewAllactive .newsTicker .zipperhead h4.selected {border:1px solid #ccc; background: #f4f9ff url(../img/fx-arrowdown2.jpg) no-repeat 57px -16px; border-bottom:none; z-index:30; position:relative;}
.newsTicker .topNews_panels {overflow:hidden}
.newsTicker .zipperhead h4.activetab {font-weight:bold;}
.viewAll .newsTicker .zipperhead h4.selected {color:#275475; padding:1px 12px 0 0 ; background:url(../img/fx-arrowdown2.jpg) no-repeat 60px 11px; height:20px;}
.newsTicker .zipperhead h4.inactivetab {top:2px; background-color:transparent;}
.viewAll h4.selected a.viewlink {color:#04233c;}
.viewAll h4.selected a.viewlink .view {display:block;}
.viewAll h4.selected a.viewlink .hide {display:none;}
.viewAllactive h4.selected a.viewlink .view {display:none;}
.viewAllactive h4.selected a.viewlink .hide {display:block;}
.viewAllactive .newstickermore a {color:#333333; font-size:1.3em; padding:0 0 4px; font-weight:bold; text-transform:none; line-height:2em; }
.viewAllactive .newstickermore a:hover {color:#7aa2cb;}
.viewAllactive .newstickermore {display:block; border:1px solid #ccc; background: #f4f9ff url(../img/fx-topNewsBack.jpg) no-repeat left top; padding:8px; position:absolute; top:26px; width:549px ; left:0px; z-index:20; border-top:none;}
.viewAll .newstickermore, .viewAllactive .topNews_panels, .viewAll .topNews_panels .hidden
{position:absolute; display:none; height:1px; overflow:hidden; z-index:-100;left:-10000px; top:-10000px;}
XHTML
<div class="newsTickerContainer scroll_container viewAll ">
<div class=" newsTicker">
<div class="zipperhead clearFix">
<h4 class="activetab">Top FX News</h4>
<h4 class="inactivetab">Top FX News</h4>
<h4 class="selected">
<a href="#" class="viewlink"><span class="view">View All</span><span class="hide">Hide</span></a>
</h4>
</div>
<div class="topNews_panels">
<div id="topNews_panel_fx">
<div class="zippercontent" >
<ul class="nav-inline arrows"><li class="prev"><a href="#prev"></a></li><li class="next"><a href="#next"></a></li></ul>
<ul class="newsItem" >
<li>
<p><a target="_self" href="/page/top-fx-news.html#id=SBA0000905878218084517604575588140389821442">FX Video Test</a></p>
</li>
<li>
<p><a target="_self" href="/page/top-fx-news.html#id=SBA0000905878218084517604575588162528930920">Heading for the Exits</a></p>
</li>
<li>
<p><a target="_self" href="/page/top-fx-news.html#id=SB124422420077263227">Maxs copyflow head</a></p>
</li>
<li>
<p><a target="_self" href="/page/top-fx-news.html#id=SB10000905878218083472704574376690644613128">Lorem ipsum dolor sit amet, </a></p>
</li>
<li>
<p><a target="_self" href="/page/top-fx-news.html#id=SB10001424052748704869304575109260357455930">Societe Generale's Anne On Emerging Markets</a></p>
</li>
</ul>
</div>
</div>
<div class="hidden" id="topNews_panel_other">
<div class="zippercontent" id="topNews_ticker_other">
<ul class="nav-inline arrows"><li class="prev"><a href="#prev"></a></li><li class="next"><a href="#next"></a></li></ul>
<ul class="newsItem">
<li>
<p><a target="_self" href="/page/top-news.html#id=SBA0000905878218084658104576313671111792858">Societe Generale's Anne On Emerging Markets</a></p>
</li>
<li>
<p><a target="_self" href="/page/top-news.html#id=SB10000905878218084177704576096354110344310">Hawaii Feels 'Lost' Without Show</a></p>
</li>
<li>
<p><a target="_self" href="/page/top-news.html#id=SB10001424052748704869304575109211904240490">Cisco's Gains Lift Tech Sector</a></p>
</li>
<li>
<p><a target="_self" href="/page/top-news.html#id=SB10001424052748704706304575107532929516718">Nostalgia for New Deal Job Plan</a></p>
</li>
<li>
<p><a target="_self" href="/page/top-news.html#id=SB121673131973850097">Credit Crisis Slams Wachoviane</a></p>
</li>
</ul>
</div>
</div>
</div>
<div class="newstickermore ">
<div class="fxnewsmore">
<ul>
<li><P><a href="http://www.google.com" class="dulled">All work and no play makes Jack a dull boy</a></P></li>
<li><P><a href="">All work and no play makes Jack a dull boy</a></P></li>
<li><P><a href="">All work and no play makes Jack a dull boy</a></P></li>
<li><P><a href="">All work and no play makes Jack a dull boy</a></P></li>
</ul>
</div>
<div class="topnewsmore">
<ul>
<li><P><a href="">All work and no play makes Jack a dull boy</a></P></li>
<li><P><a href="">All work and no play makes Jack a dull boy</a></P></li>
<li><P><a href="">All work and no play makes Jack a dull boy</a></P></li>
<li><P><a href="">All work and no play makes Jack a dull boy</a></P></li>
</ul>
</div>
</div>
</div>
注意-由于缺少xhtml,最近进行了编辑。
在Chrome中使用检查器(开发工具的"元素"选项卡中的放大镜图标)。
选择工具,然后单击链接。它将选择在您的链接上捕捉点击的元素。您可以从那里调试,方法是检查内联样式(使用javascript应用)、css中的样式以及计算的样式。
如果你更熟悉Firebug,你也可以对它做同样的事情。