我正在为一个以前构建的用作新闻自动收报机的模块编辑 XHTML/CSS。我没有使用一个滚动的链接列表，而是添加了选项卡，以便用户可以在一个链接列表和另一个链接列表之间单击。我还添加了一个下拉菜单，其中包含用户所在的相应选项卡的所有链接列表。
我为模块创建了一个非功能模板以传递给开发团队。所有 XHTML/CSS 元素都存在，但没有附加 JS 以使选项卡/下拉列表工作(我不负责后端代码)。我的本地示例显示了模块的基本状态，以及显示下拉列表的状态。在我的本地示例中，所有链接都有效，包括模块的“ zipper ”部分和下拉菜单。
但是，在正常运行的站点上下文中(后端开发人员添加了选项卡式和下拉功能后)， zipper 内的链接不起作用，下拉列表中的第一个链接(此链接与 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，您可以用它做同样的事情。
关于javascript - 重叠选项卡/下拉 div - 链接不起作用 - CSS 或 JS 问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6510184/