1

Javascript を使用して複数のタブ間を循環するメニューを正常にセットアップしました。問題は、このサイトの検索に SiteLevel を使用していることです。検索ボックスを非表示/非表示メニューの一部にしたいのですが、スクリプトが必要です（検索ボックスのhtmlコードも試しましたが、まだ修正されていません）

競合する他の CSS やスクリプトではないことを確認するために、この概念の最も単純な形式にそれを組み合わせましたが、それでも空白のボックスが開きます。コードは次のとおりです。

私はそれをhttp://jsfiddle.net/Split98/A3DVa/に入れました

<a href="#software">Software</a>
<a href="#hardware">Hardware</a>
<a href="#supplies">Supplies</a>
<a href="#contact">Contact</a>
<a href="#search">Search</a>
<div id="nav">
    <div id="software">Hello!</div>
    <div id="hardware">Yes!</div>
    <div id="supplies">Yeee Haw!</div>
    <div id="contact">Bingo!</div>
    <div id="search"><script type="text/javascript" src="http://www.sitelevel.com/javabox?crid=ze32uipb"></script></div>
</div>

CSS:

#nav div {
    display: none;
    background-color: red;
    height: 200px;
}

jQuery:

$(function(){
   var divs = $('#nav div'),
   links = $('a');

   links.click(function () {
       $(this.hash).toggle().siblings().hide();
       return false;
   });
})

よろしくお願いします！

4

1 に答える 1

1

LIVE DEMO

#nav > divCSS で使用
するだけで、直接の子のみがターゲットになります。
そうしないと、すべてのDIV要素が非表示になります (検索ツール)

#nav > div {
    display: none;
    background-color: red;
    height: 200px;
}

編集されたjQuery

$(function () {       

    var divs = $('#nav div'),
        links = $('a');

    divs.eq(0).show(); // if you need it.....

    links.click(function ( e ) {  // e = event
        e.preventDefault();       // instead of return false;
        $(this.hash).toggle().siblings().hide();
    });
});
于 2013-02-25T01:50:24.890 に答える