在JS中如何實現標籤滾動切換-js教程-PHP中文網

首頁

web前端

js教程

在JS中如何實現標籤滾動切換

亚连

Jun 15, 2018 pm 04:03 PM

js切換標籤捲動

這篇文章帶給大家的是用JS實現item標籤點擊後滾動切換的效果，有興趣的朋友測試學習下吧。

本文的JS效果是在滑鼠點擊ITEM標籤的時候，實現下方的內容跟隨滾動切換的效果，我們先來看下運行後的效果圖。

以下是腳本之家原創的運行程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery实现的平滑滚动选项卡</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.tabs{width: 1200px; margin: 0 auto; height: 336px; overflow: hidden;}
.tabs_item{height: 36px;}
.tabs_block{height: 300px;}
.list_item{float: left; width: 200px; height: 36px; line-height: 36px; font-size: 26px; text-align: center;background-color:#FC0;cursor: pointer;}
.list_item.active{color: #FFF;background-color:#F60}
.tabs_block{width: 20000px; position: relative;}
.list_block{display: none; float: left; width: 1200px; height: 300px; font-size: 100px; text-align: center; line-height: 300px;background-color:#F4F4F4}
.list_block.show{display: block;}
</style>
<script>jQuery.easing[&#39;easeOutCubic&#39;] = function (x, t, b, c, d) {
 return c*((t=t/d-1)*t*t + 1) + b;
};
function Tabs(tabs,list,block,item,$){
 var tabs = $(tabs);
 var width = tabs.width();
 tabs.find(list+&#39;:first&#39;).addClass(&#39;active&#39;);
 tabs.find(item+&#39;:first&#39;).addClass(&#39;show&#39;);
 tabs.find(list).click(function(){
 var $this = $(this);
 var i = tabs.find(block).find(&#39;.show&#39;).index();
 var n = $this.index();
 $this.addClass(&#39;active&#39;).siblings(&#39;.active&#39;).removeClass(&#39;active&#39;);
 tabs.find(item).eq(n).addClass(&#39;show&#39;);
 if(n > i){
 tabs.find(block).stop().animate({&#39;left&#39;:&#39;-&#39;+width+&#39;px&#39;},600,&#39;easeOutCubic&#39;,function(){
  tabs.find(block).css(&#39;left&#39;,&#39;0px&#39;);
  tabs.find(item).eq(n).siblings(&#39;.show&#39;).removeClass(&#39;show&#39;);
  });
 }else{
 tabs.find(block).css(&#39;left&#39;,&#39;-&#39;+width+&#39;px&#39;).stop().animate({&#39;left&#39;:0},600,&#39;easeOutCubic&#39;,function(){
  tabs.find(item).eq(n).siblings(&#39;.show&#39;).removeClass(&#39;show&#39;);
  });
 }
 });
}
</script>
</head>
<body>
 <p class="tabs">
 <p class="tabs_item">
  <p class="list_item">list item 1</p>
  <p class="list_item">list item 2</p>
  <p class="list_item">list item 3</p>
  <p class="list_item">list item 4</p>
  <p class="list_item">list item 5</p>
  <p class="list_item">list item 6</p>
 </p>
 <p class="clear"> </p>
 <p class="tabs_block">
  <p class="list_block">list block 1</p>
  <p class="list_block">list block 2</p>
  <p class="list_block">list block 3</p>
  <p class="list_block">list block 4</p>
  <p class="list_block">list block 5</p>
  <p class="list_block">list block 6</p>
 </p>
 </p>
<script type="text/javascript">
 jQuery(document).ready(function(){
  var myTabs = new Tabs(&#39;.tabs&#39;,&#39;.list_item&#39;,&#39;.tabs_block&#39;,&#39;.list_block&#39;,jQuery);
 });
</script>
<p style="text-align:center">更多代码请访问：<a href="//www.jb51.net" target="_blank">脚本之家</a></p>
</body>
</html>

在程式碼中我們引用了百度的jquery

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

上面是我整理給大家的，希望未來對大家有幫助。

透過JS技術如何實現百度搜尋

#在Express如何使用cookie-parser中間件

在js中getBoundingClientRect有什麼作用？

在vue 2.0中如何實作購物車小球拋物線

AngularJS1.x應用遷移至React（詳細教學）

詳細解讀Vue.js中的元件使用方法以及作用？

以上是在JS中如何實現標籤滾動切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr