锚定链接在手风琴效果中的替代标签内不起作用

时间:2013-12-18 15:27:24

标签: javascript jquery html css anchor

我有这个标签用css和javascript隐藏对方:

 <div class="accordionContent">
        <div class="menusfondo">
            <div class="content">
                <ul class="tabs2">
                <li><a href="#scheda4" id="uno">INTRODUZIONE</a></li>
                <li><a href="#scheda5">FILOSOFIA</a></li>
                <li><a href="#scheda6">CASI DI SUCCESSO</a></li>
                <li><a href="#scheda7">ULTIME INNOVAZIONI</a></li>
                <li><a href="#scheda8">CONTATTI</a></li>
            </ul>
            <div class="contenitore_tab2">
                <div id="scheda4" class="contenuto_tab2">
                    <h1>title</h1>
                    <h2>title2</h2>
                    <p>content <a href="#scheda5">link scheda 5</a>. content</p>
                </div>
                <div id="scheda5" class="contenuto_tab2">
                      <h1> title</h1>
                      <h2> title2</h2>
                    <p>content</p>
                </div>
                <div id="scheda6" class="contenuto_tab2">
                       <h1>title</h1>
                       <h2>title2 </h2>
                    <p>content</p></div>
                <div id="scheda7" class="contenuto_tab2">
                       <h1>title</h1>
                       <h2>title2</h2>
                    <p>content</p></div>
            </div>
        </div>
    </div>

                </div>
          </div>            
    <div id="wrapper2">
    <div class="accordionButton uno"><div class="content">
    <h1>title</h1>
    </div>
    <div id="hidden"></div></div>
    <div class="accordionContent ">
        <div class="menusfondo">
            <div class="content">
            <ul class="tabs">
                <li><a href="#scheda1">INTRODUZIONE</a></li>
                <li><a href="#scheda2">FILOSOFIA</a></li>
                <li><a href="#scheda3">NEGOZIO ONLINE</a></li>
                <li><a onclick="window.open('http://www.eurotesterpen.com/contact','_blank');">CONTATTI</a></li>
            </ul>
            <div class="contenitore_tab">
                <div id="scheda1" class="contenuto_tab">

不起作用的锚在div“scheda4”内。它与每个选项卡的菜单中的链接完全相同,但我不确定是否应该将其链接到javascript以使其工作。 javascript是:

 $(document).ready(function() {
$(".contenuto_tab2").hide(); //Nascondo tutti i contenuti
$("ul.tabs2 li:first").addClass("active").show(); //Attivo il primo tab
$(".contenuto_tab2:first").show(); //Mostro il primo contenuto (contenuto del primo tab)

$("ul.tabs2 li").click(function() {
    $("ul.tabs2 li").removeClass("active"); //Rimuovo tuttle le classi "active"
    $(this).addClass("active"); //Attivo il tab selezionato
    $(".contenuto_tab2").hide(); //Nascondo tutti i contenuti

    var tabAttivo = $(this).find("a").attr("href"); //Prendo il valore dell'attributo href del tab per attivare il realtivo contenuto
    $(tabAttivo).fadeIn(); //Faccio un Fade in per mostrare il contenuto dell'ID appena trovato
    return false;
});

});

为什么我点击它时没有显示正确的标签(scheda 5)?点击的效果是无,页面保持不变。请你能给我一些帮助吗?

1 个答案:

答案 0 :(得分:0)

我做过这样的事情:

 <div id="scheda4" class="contenuto_tab2">
                <h1>title</h1>
                <h2>title2</h2>
                <p class="link">content <a href="#scheda5">link scheda 5</a>. content</p>
            </div>

然后在javascript中,在文档就绪函数内部:

 $("p.link").click(function() {
    $("ul.tabs2 li").removeClass("active"); //Rimuovo tuttle le classi "active"
    $('ul.tabs2 li a[href="#scheda5"]').addClass("active"); //Attivo il tab selezionato
    $(".contenuto_tab2").hide(); //Nascondo tutti i contenuti

    var tabAttivo = $(this).find("a").attr("href"); //Prendo il valore dell'attributo href del tab per attivare il realtivo contenuto
    $(tabAttivo).fadeIn(); //Faccio un Fade in per mostrare il contenuto dell'ID appena trovato
    return false;
}); 

除了这一行之外它实际上有效:

 $('ul.tabs2 li a[href="#scheda5"]').addClass("active"); //Attivo il tab selezionato

但我真的不明白为什么......