卡卡網

本文給大家介紹6款精美漂亮的CSS Tabs選項卡，它們有著漂亮的樣式，讓人看著舒服的過渡效果，值得推薦收藏使用。

1、內容Tabs選項卡

該選項卡適合用于內容切換，切換過渡使用了色條平滑移動，以及Tab選項卡漸顯的效果。

本實例需要用到jquery編程，因此需要引用jquery庫文件；另外用到了第三方js插件jquery.transit.min.js。

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery.transit.min.js'></script>

demodownload

2、項目/欄目Tabs選項卡

該選項卡適合用于項目/欄目切換內容切換，添加了鼠標懸停效果。

本實例使用了第三方JS插件tabby.polyfills.js，并且需要一點JS編程。

<script src='tabby.polyfills.js'></script>
<script>
var tabs = new Tabby('[data-tabs]');
</script> 

demodownload

3、項目/欄目Tabs選項卡

該選項卡適合用于項目/欄目切換內容切換，沒有使用任何效果，是一個傳統(tǒng)的Tabs選項卡樣式。

本實例需要用到jquery編程，因此需要引用jquery庫文件。

<script src='jquery-3.2.1.min.js'></script>
<script>
$(document).ready(function () {
  $('.widget-tab').click(function () {
    switchTabs($(this));
  });
});

function switchTabs(that) {
  var parent = that.parent();
  var grandparent = parent.parent();
  var showSegment = that.attr('data-tab') + '-seg';

  // remove selected class from tabs and add it to the current tab
  parent.find('.selected').removeClass('selected');
  that.addClass('selected');

  // display selected segment
  grandparent.find('.visible').removeClass('visible');
  grandparent.find('[data-tab=' + showSegment + ']').addClass('visible');
} // end switchTabs(that)

</script>

demodownload

4、項目/欄目Tabs選項卡

該選項卡適合用于項目/欄目切換內容切換，添加了鼠標懸停效果。

本實例需要用到jquery編程，因此需要引用jquery庫文件。

<script src='jquery-3.2.1.min.js'></script>
<script>
$(document).ready(function () {
  var newWidget = "<div class='widget-wrapper'> <ul class='tab-wrapper'></ul> <div class='new-widget'></div></div>";
  $(".widget").hide();
  $(".widget:first").before(newWidget);
  $(".widget > div").each(function () {
    $(".tab-wrapper").append("<li class='tab'>" + this.id + "</li>");
    $(this).appendTo(".new-widget");
  });
  $(".tab").click(function () {
    $(".new-widget > div").hide();
    $('#' + $(this).text()).show();
    $(".tab").removeClass("active-tab");
    $(this).addClass("active-tab");
  });
  $(".tab:first").click();
});
</script>

demodownload

5、項目/欄目/內容Tabs選項卡

本Tabs選項卡的設計，適合各種類型的Tabs選項切換，無論是欄目/項目切換，還是正文內容切換。

本實例使用了鼠標懸停效果，并且添加了正文內容漸顯效果，整體設計得精美漂亮。

本實例需要用到jquery編程，因此需要引用jquery庫文件。

demodownload

6、內容Tabs選項卡

本Tabs選項卡的設計，適合用在內容切換上。

本實例使用了鼠標懸停效果，并且添加色條平滑移動的效果，整體設計得精美漂亮。

本實例需要用到jquery編程，因此需要引用jquery庫文件。

demodownload

本實例用到Font Awesome圖標。

注意！你的Web服務器可能要安裝配置Font Awesome圖標字體，請看以下幾篇文章。

Linux Nginx安裝配置Font Awesome圖標字體

IIS7.5安裝配置Font Awesome圖標字體的方法

您可能對以下文章也感興趣

• 10款純CSS Tabs選項卡【實例演示/源碼下載】

標簽: Tab選項卡  選項卡