Javascript 重叠选项卡/下拉divs-链接不工作-CSS或JS问题？

我正在为一个以前构建的模块编辑XHTML/CSS，该模块可以作为新闻代码。我没有一个滚动的链接列表，而是添加了选项卡，这样用户可以在一个链接列表和另一个链接列表之间单击。我还添加了一个下拉菜单，其中包含用户所在的相应选项卡的所有链接列表

我为模块创建了一个不起作用的模板，以便传递给开发团队。所有XHTML/CSS元素都存在，但没有附加任何JS以使选项卡/下拉菜单正常工作（我不负责后端代码）。我的本地示例显示了模块的基本状态，以及下拉列表显示的状态。在我的本地示例中，所有链接都可以工作，无论是在模块的“拉链”部分还是下拉列表中

但是，在功能站点的上下文中（后端开发人员添加了选项卡和下拉功能后），拉链内的链接不起作用，下拉列表中的第一个链接（此链接与拉链重叠）不起作用。我说的不工作是指它们是可点击的，路径是可见的，但它们什么也不做。下拉列表中的所有其他链接（它们不重叠拉链部分）

虽然我倾向于相信这是一个JS错误，但我无法知道这一点。我对JS的唯一体验是通过jQuery，我们根本不使用jQuery

我的问题是——我能做些什么来帮助这种情况吗？有人在我的代码中看到任何引起危险或我可以更改的东西吗

他们确实要求我添加一些CSS行，以便将隐藏的div放置在页面之外。我答应了，这个问题似乎已经解决了一段时间。然后我添加了背景图像和颜色变化。根据开发团队的说法，这导致问题再次发生，因此我担心我的代码中遗漏了一些我犯了严重错误的东西。然而，我不能确定，同样，我没有JS方面的经验，也没有后端团队正在做什么

我主要是在寻找一些帮助，比如我的代码可能有什么问题，如何添加或删除部分代码以提供帮助，或者我的代码是否很好，实际上是否存在JS错误

我附加了下拉状态的XHTML（我没有构建原始模块，此时重建XHTML几乎是不可能的）和CSS（对于整个模块，而不仅仅是选项卡/下拉列表）

提前谢谢你，对于这个冗长的问题我深表歉意，但我认为所有的信息都可能有用

CSS

XHTML

顶级外汇新闻
顶级外汇新闻





































 
 
 
 


 
 
 
 

---

注意-由于缺少xhtml，最近进行了编辑。

使用Chrome中的inspector（开发工具“元素”选项卡中的放大镜图标）

选择工具，然后单击链接。它将选择链接上捕捉点击的元素。通过检查内联样式（使用javascript应用）和css中的样式以及计算样式，可以从那里进行调试

---

如果您更熟悉Firebug，您也可以对它做同样的事情。

使用Chrome中的inspector（开发者工具“元素”选项卡中的放大镜图标）

选择工具，然后单击链接。它将选择链接上捕捉点击的元素。通过检查内联样式（使用javascript应用）和css中的样式以及计算样式，可以从那里进行调试

如果你愿意，你也可以用Firebug做同样的事情

.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;}

<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>