Fügen Sie den Tabs die Pfeilnavigation hinzu

Ich möchte den Tabs eine vorherige und nächste Schaltflächennavigation hinzufügen, kann aber nicht herausfinden, wie Sie das erreichen können. Ich habe die Tab-Navigation und eine grundlegende Klick-Funktion für den vorherigen und nächsten Button eingerichtet.Fügen Sie den Tabs die Pfeilnavigation hinzu

Jede Hilfe würde sehr geschätzt werden.

$(document).ready(function() { 
 

 
    $('ul.tabs li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

 
    $('ul.tabs li').removeClass('current'); 
 
    $('.tab-content').removeClass('current'); 
 

 
    $(this).addClass('current'); 
 
    $("#" + tab_id).addClass('current'); 
 
    }) 
 

 
    $('#previous').click(function() {}) 
 

 
    $('#next').click(function() {}) 
 

 
})

body { 
 
    margin-top: 100px; 
 
    font-family: 'Trebuchet MS', serif; 
 
    line-height: 1.6 
 
} 
 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 
ul.tabs { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 
ul.tabs li { 
 
    background: none; 
 
    color: #222; 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    cursor: pointer; 
 
} 
 
ul.tabs li.current { 
 
    background: #ededed; 
 
    color: #222; 
 
} 
 
ul.arrownavigation { 
 
    list-style: none; 
 
} 
 
ul.arrownavigation li { 
 
    display: inline-block; 
 
    background: #111; 
 
    color: #fff; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 
ul.arrownavigation li:active { 
 
    background: #444; 
 
} 
 
ul.arrownavigation li.disabled { 
 
    opacity: 0.7; 
 
} 
 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 
.tab-content.current { 
 
    display: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <ul class="arrownavigation"> 
 
    <li id="previous">Previous</li> 
 
    <li id="next">Next</li> 
 
    </ul> 
 

 
    <ul class="tabs"> 
 
    <li class="tab-link current" data-tab="tab-1">Tab One</li> 
 
    <li class="tab-link" data-tab="tab-2">Tab Two</li> 
 
    <li class="tab-link" data-tab="tab-3">Tab Three</li> 
 
    <li class="tab-link" data-tab="tab-4">Tab Four</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div id="tab-3" class="tab-content"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    <div id="tab-4" class="tab-content"> 
 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 

 
</div> 
 
<!-- container -->

Quelle

2016-10-10 Alexander Hein

$(document).ready(function() { 
 

 
    $('ul.tabs li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

 
    $('ul.tabs li').removeClass('current'); 
 
    $('.tab-content').removeClass('current'); 
 

 
    $(this).addClass('current'); 
 
    $("#" + tab_id).addClass('current'); 
 
    }) 
 

 
    $('#previous').click(function() { 
 
    if($('ul.tabs li.current').prev().length != 0){ 
 
    $('ul.tabs li.current').removeClass('current').prev().addClass('current').click(); 
 
} 
 
    }) 
 

 
    $('#next').click(function() { 
 
\t if($('ul.tabs li.current').next().length != 0){ 
 
    $('ul.tabs li.current').removeClass('current').next().addClass('current').click(); 
 
\t \t } 
 
    }); 
 
})

body { 
 
    margin-top: 100px; 
 
    font-family: 'Trebuchet MS', serif; 
 
    line-height: 1.6 
 
} 
 

 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
ul.tabs { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 

 
ul.tabs li { 
 
    background: none; 
 
    color: #222; 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    cursor: pointer; 
 
} 
 

 
ul.tabs li.current { 
 
    background: #ededed; 
 
    color: #222; 
 
} 
 

 
ul.arrownavigation { 
 
    list-style: none; 
 
} 
 

 
ul.arrownavigation li { 
 
    display: inline-block; 
 
    background: #111; 
 
    color: #fff; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 

 
ul.arrownavigation li:active { 
 
    background: #444; 
 
} 
 

 
ul.arrownavigation li.disabled { 
 
    opacity: 0.7; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 

 
.tab-content.current { 
 
    display: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <ul class="arrownavigation"> 
 
    <li id="previous">Previous</li> 
 
    <li id="next">Next</li> 
 
    </ul> 
 

 
    <ul class="tabs"> 
 
    <li class="tab-link current" data-tab="tab-1">Tab One</li> 
 
    <li class="tab-link" data-tab="tab-2">Tab Two</li> 
 
    <li class="tab-link" data-tab="tab-3">Tab Three</li> 
 
    <li class="tab-link" data-tab="tab-4">Tab Four</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div id="tab-3" class="tab-content"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    <div id="tab-4" class="tab-content"> 
 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 

 
</div> 
 
<!-- container -->

Sie müssen nur folgenden Code hinzufügen:

$('#previous').click(function() { 
if($('ul.tabs li.current').prev().length != 0){ 
    $('ul.tabs li.current').removeClass('current').prev().addClass('current').click(); 
} 
     }); 

    $('#next').click(function() { 
if($('ul.tabs li.current').next().length != 0){ 
    $('ul.tabs li.current').removeClass('current').next().addClass('current').click(); 
     } 
    }); 

     });

Quelle

2016-10-10 10:56:01 Dhara

Blick auf diesen Link, vielleicht hilft es Ihnen, oder gibt Ihnen eine Idee, um Ihren Code zu ändern und machen es funktioniert: http://www.small-software-utilities.com/2011/05/add-navigation-arrows-to-jquery-tabs/

Quelle

2016-10-10 10:48:29 user2311103

Fügen Sie den Tabs die Pfeilnavigation hinzu

Antwort

Verwandte Themen