idTabs - タブ内のアンカー付きのタブを切り替える

idTabsを使用してページのタブの内容を制御しています。私は上部とタブ付きコンテンツの下にある通常のタブメニューを持っています。最初に私がクリックされ、アンカーを持っているコンテンツをタブ付き、ここではタブ番号2に切り替える必要があるでは、例えばHTMLである：ここでidTabs - タブ内のアンカー付きのタブを切り替える

<div id="practice-menu"> 
    <ul class="tabs"> 
     <li><a href="#practice-info-content">Practice information</a></li> 
     <li><a href="#practice-treatment-content">Our treatments</a></li> 
     <li><a href="#practice-team-content">Meet the team</a></li> 
    </ul> 
</div> 

<div id="practice-info-content" class="tab-content"> 
    <h2 class="section-title">Practice information</h2> 
    <a href="#practice-treatment-content">See our treatments and costs</a> 
</div> 

<div id="practice-treatment-content" class="tab-content"> 
    <h2 class="section-title">Our treatments and costs</h2> 
</div> 

<div id="practice-team-content" class="tab-content"> 
    <h2 class="section-title">Meet the team</h2> 
</div>

は場所にアンカーを持つタブのフィドルであるが、そのタブをスウィッチしないでください。https://jsfiddle.net/uLy39osc/

idTabsで動作するこの検索エンジンでは、検索と検索ができません。誰でもこれがどう動くか知っていますか？

出典

2016-05-20 Mr Lee

[fiddle]（http://jsfiddle.net）に広告を掲載できますか？ – SamGhatak

あなたはJavaScriptコードを提供できますか？ –

フィドル：https://jsfiddle.net/uLy39osc/ –

<!DOCTYPE html> 
    <html> 
    <style> 
    body {font-family: "Lato", sans-serif;} 

    ul.tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
    } 

    /* Float the list items side by side */ 
    .tab li {float: left;} 

    /* Style the links inside the list items */ 
    ul.tab li a { 
    display: inline-block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
    } 

    /* Change background color of links on hover */ 
    ul.tab li a:hover { 
    background-color: #ddd; 
    } 

    /* Create an active/current tablink class */ 
    ul.tab li a:focus, .active { 
    background-color: #ccc; 
    } 

    /* Style the tab content */ 
    .tabcontent { 
    display: none; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
    border-top: none; 
    } 
    </style> 
    <body> 

    <p>Click on the links inside the tabbed menu:</p> 

    <ul class="tab"> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li> 
    <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li> 
    </ul> 

    <div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
    </div> 

    <div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
    </div> 

    <div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
    </div> 

<script> 
function openCity(evt, cityName) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 
</script> 

</body> 
</html>

出典

2016-05-20 10:44:56 Xander

申し訳ありません。私はこれを働かせることができませんでした。私は、タブを切り替えるタブの内容の中にアンカーがあるのを見ています。 –

これはうまく動作します。基本的には、hrefを取ったタブコンテンツのアンカーにclickイベントを追加し、それをタブメニューのhrefにマッチさせ、そのアンカーをクリックするようにしました。うまくいきます！

$('.tab-switch').click(function(event) { 
    event.preventDefault(); 
    var hash = $(this).attr("href"); 
    if (hash) $('.tabs li a[href$="'+hash+'"]').trigger('click'); 
});

出典

2016-05-25 11:07:11

idTabs - タブ内のアンカー付きのタブを切り替える

答えて

関連する問題