1
ニュースティッカーとして機能する以前にビルドされたモジュール用にXHTML/CSSを編集しています。 1つのスクロール・リンク・リストを持つ代わりに、ユーザーがリンクの1つのリストと別のリストをクリックできるように、タブを追加しています。私はまた、ユーザーがいる対応するタブのすべてのリンクのリストを含むドロップダウンメニューを追加しています。タブの重複/ divの削除 - リンクが機能しない - CSSまたはJSの問題？
開発チームにモジュールを渡すための機能しないテンプレートを作成しました。すべてのXHTML/CSS要素は存在しますが、タブ/ドロップダウン作業を行うためにJSは添付されていません（私はバックエンドコードの責任を負いません）。私のローカルの例では、モジュールの基本的な状態と、ドロップダウンの状態を示しています。ローカルの例では、モジュールの「ジッパー」部分とドロップダウン部分の両方で、すべてのリンクが機能します。
しかし、機能しているサイトのコンテキスト内（バックエンドの開発者がタブ付きとドロップダウン機能を追加した後）には、ジッパー内のリンクは機能していないため、ドロップダウンの最初のリンクジッパー）が作動していません。私は彼らがクリック可能であることを意味しません、パスは表示されますが、彼らは何もしません。ドロップダウン作業の他のすべてのリンク（ジッパー部分と重複しない）。
私はこれがJSエラーだと思う傾向がありますが、私はこれを知る方法がありません。 JSに関する私の唯一の経験はjQueryであり、jQueryはまったく使用していません。
私の質問は、私が状況を助けるためにできることはありますか？誰かが私のコードの中で赤い旗を掲げるもの、または私が変更できるものを見ますか？
彼らは、ページから隠されたdivを配置するために、いくつかのCSS行を追加するようにお願いしました。私は義務づけられ、この問題はしばらく解決されたようだった。私は背景画像と色の変化を加えました。デベロッパーチームによると、これは問題が再び発生する原因になったので、私は恐ろしく間違っているコードに何かがないことを心配しています。しかし、私は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に編集しました。
多くの情報とコードで+1。判読不可能な見出しの場合は-0.33。 :-) – Smandoli
私は本当にヘッドラインを言葉にするより良い方法をありがとう - 私は非常に正確な問題が何であるかを言うための最善の方法については混乱しています！ – Prower