0

ドロップダウン メニューが機能しません。このタブの下にたくさんの項目を表示しようとしていますが、showtab 機能を動作させることができません。tabListequal toの基になる UL を指定しようとしてcurrentTabいますが、そこにエラーが発生し、それを表示するための z-index を設定できません。JSFiddleは次のとおりです。

HTML

<ul class="tabMenu">
         <li class="tab" style="background-color: rgb(221, 221, 255)"><a href="#">Computers</a>
            <ul style="z-index: 1">
               <li><a href="#">Desktop</a></li>
               <li><a href="#">Notebooks</a></li>
               <li><a href="#">Tablets</a></li>
               <li><a href="#">Remanufactured</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Electronics</a>
            <ul>
               <li><a href="#">Televisions</a></li>
               <li><a href="#">Cameras</a></li>
               <li><a href="#">Camcorders</a></li>
               <li><a href="#">MP3 Players</a></li>
               <li><a href="#">Game Stations</a></li>
               <li><a href="#">PDAs</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Accessories</a>
            <ul>
               <li><a href="#">Monitors</a></li>
               <li><a href="#">Printers</a></li>
               <li><a href="#">Memory</a></li>
               <li><a href="#">Drives</a></li>
               <li><a href="#">Networking</a></li>
               <li><a href="#">Mobile</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Software</a>
            <ul>
               <li><a href="#">Utilities</a></li>
               <li><a href="#">Business</a></li>
               <li><a href="#">Games</a></li>
               <li><a href="#">Multimedia</a></li>
               <li><a href="#">Operating Systems</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Services</a>
            <ul>
               <li><a href="#">Tech Support</a></li>
               <li><a href="#">Downloads</a></li>
               <li><a href="#">Drivers</a></li>
               <li><a href="#">Documents</a></li>
               <li><a href="#">Customer Service</a></li>
               <li><a href="#">Contacts</a></li>
            </ul>
         </li>
         <li class="tab"><a href="#">Store</a>
            <ul>
               <li><a href="#">Shopping Cart</a></li>
               <li><a href="#">Checkout</a></li>
               <li><a href="#">Your Account</a></li>
               <li><a href="#">Shipping</a></li>
               <li><a href="#">Specials</a></li>
            </ul>
         </li>
      </ul>​

CSS

ul                  {list-style-type: none}
ul a                {color: black; text-decoration: none}
.tabMenu            {position: absolute; top: 33px; left: 90px; width: 800px}
.tabMenu > li       {width: 100px; height: 20px; text-align: center;
                     float: left; margin-right: 5px}
.tabMenu > li > a   {display: block; margin: 0px; padding: 2px 3px;
                     border-left: 2px solid rgb(221, 221, 221); 
                     border-top: 2px solid rgb(155, 155, 155);
                     border-right: 4px solid rgb(102, 102, 102);
                     border-bottom: 1px solid white}
.tabMenu > li > a:hover {color: black; background-color: rgb(221, 221, 255)}


.tabMenu > li > ul  {position: absolute; top: 20px; left: 0px; width: 710px;
                     padding-top: 5px;
                     background-color: rgb(221, 221, 255);
                     border-left: 2px solid rgb(221, 221, 221);
                     border-right: 4px solid rgb(102, 102, 102);
                     border-bottom: 1px solid black}

.tabMenu > li > ul > li {float: left; width: 16%; height: 25px}
.tabMenu > li > ul > li > a {display: block; margin: 0px; padding: 2px 3px;
                             font-size: 0.9em}
.tabMenu > li > ul > li > a:hover {color: blue}​

Javascript

var currentTab = null;
var maxZ = 1;
window.onload = setTabs;

function setTabs(){
    var menuTabs = new Array();
    var allElems = document.getElementsByTagName("*");

    for(var i = 0; i < allElems.length; i++){
        if(allElems[i].className == "tab") menuTabs.push(allElems[i]);
    }

    for(var i = 0; i < menuTabs.length; i++){
        menuTabs[i].onclick = showTab;
    }

    currentTab = menuTabs[0];
}

function showTab(){
    var tabList = document.currentTab.ul;
    currentTab.style.bgcolor = "white";
    currentTab.style.color = "rgb(221,21,255)";
    maxZ++;
    tabList.style.zIndex = maxZ;
}​
4

1 に答える 1

1

これは部分的にjsfiddleの問題だと思います-イベントリスナーを使用することを選択した場合でも、window.onloadはまったくトリガーされません。理由を理解しようとするのではなく、 jsbinで別の環境に移動しただけで、問題は発生していません。

それでも機能しませんが、エラーがより明らかになります - currentTab はドキュメントのプロパティではありません。ただし、グローバル変数にしたので、問題ありません。また、クリックされた要素を取得する手段は実際にはありませんが、これはクリック イベントで発生するイベントを通じて取得できます。

したがって、showTab のコードは次のようになります。

function showTab(e) {
    currentTab.style.background = "white";
    currentTab.style.color = "rgb(221,21,255)";
    var newTab = e.target.parentNode;
    var tabList = newTab.getElementsByTagName("ul")[0];
    newTab.style.background = "#ddf";

    maxZ++;
    tabList.style.zIndex = maxZ;
    currentTab = newTab;
}

また、人々がこのあたりで jQuery にやや過度に賛成できることは知っていますが、このような場所では本当に便利です。単純な DOM 操作がかなり簡単になります。これまであまり使用したことがない場合は、見てみるとよいでしょう。

于 2012-11-16T21:07:15.160 に答える