菠萝蜜视频在线,亚洲日韩精品一区二区,东北老熟妇高潮45分钟

技術(shù)頻道 - html技術(shù)

6款精美漂亮的CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】

作者:admin 時(shí)間:2022-1-16 23:4:10 瀏覽:

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

1、內(nèi)容Tabs選項(xiàng)卡

該選項(xiàng)卡適合用于內(nèi)容切換，切換過(guò)渡使用了色條平滑移動(dòng)，以及Tab選項(xiàng)卡漸顯的效果。

本實(shí)例需要用到j(luò)query編程，因此需要引用jquery庫(kù)文件；另外用到了第三方j(luò)s插件jquery.transit.min.js。

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

demo download

2、項(xiàng)目/欄目Tabs選項(xiàng)卡

該選項(xiàng)卡適合用于項(xiàng)目/欄目切換內(nèi)容切換，添加了鼠標(biāo)懸停效果。

本實(shí)例使用了第三方JS插件tabby.polyfills.js，并且需要一點(diǎn)JS編程。

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

demo download

3、項(xiàng)目/欄目Tabs選項(xiàng)卡

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

本實(shí)例需要用到j(luò)query編程，因此需要引用jquery庫(kù)文件。

<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>

demo download

4、項(xiàng)目/欄目Tabs選項(xiàng)卡

該選項(xiàng)卡適合用于項(xiàng)目/欄目切換內(nèi)容切換，添加了鼠標(biāo)懸停效果。

本實(shí)例需要用到j(luò)query編程，因此需要引用jquery庫(kù)文件。

<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>