jquery --- 監聽tab欄的變化

1. jQuery樣式操作

1.1 操作css方法

  1. 參數只寫屬性名,則返回屬性值(字符串)
$(this).css('color')
  1. 參數是 屬性名、屬性值(逗號分隔,則表示設置屬性
$(this).css('color','red')
  1. 參數可以是對象的形式
$(this).css({width: 400px,height: 400px
})

1.2 設置類樣式方法

  1. 添加類
$('button:first').click(function() {$('div').addClass('block')
})
  1. 刪除類
$('button:first').click(function() {$('div').removeClass('block')
})
  1. 切換類
$('button:first').click(function() {$('div').toggleClass('block')
})

1.3 栗子: tab欄切換

思路:

  1. 當點擊小li時,當前被點擊的li添加類 current, 其余的移除current類
  2. 得到當前的索引號,顯示相同索引號的內容
<style>.clearfix:before,.clearfix:after {content: '';display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}.header ul {width: 700px;height: 50px;padding-top: 15px;background-color: #ccc;}.box {width: 700px;height: 300px;margin: 30px auto;}li {float: left;height: 40px;line-height: 40px;list-style: none;padding: 0 15px;}li:hover {cursor: pointer;}.current {background-color: red;color: white;}.header {padding-top: 15px;}.content {padding-top: 20px;padding-left: 45px;}.content div {display: none;}
</style>
</head>
<body>
<div class="box"><div class="header clearfix"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價(50000)</li><li>手機社區</li></ul></div><div class="content"><div display="block">商品介紹模塊</div><div>規格與包裝模塊</div><div>售后保障模塊</div><div>商品評價(50000)模塊</div><div>手機社區模塊</div></div>
</div>
<script>$(function() {$('.content div:first').show()$('.box li').click(function() {var currentIndex = $(this).index();$(this).addClass('current')$(this).siblings('li').removeClass('current')$('.content div').hide()$('.content div').eq(currentIndex).show()})})
</script>
</body>

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250333.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250333.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250333.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

bzoj 1645: [Usaco2007 Open]City Horizon 城市地平線【線段樹+hash】

bzoj題面什么鬼啊…… 題目大意&#xff1a;有一個初始值均為0的數列&#xff0c;n次操作&#xff0c;每次將數列(ai,bi-1)這個區間中的數與ci取max&#xff0c;問n次后元素和 離散化&#xff0c;然后建立線段樹&#xff0c;每次修改在區間上打max標記即可 #include<iostrea…

Redis單機和集群環境搭建

一、安裝單機版redis 1、可以自己去官網下載&#xff0c;當然也可以用課程提供的壓縮包 # yum install gcc # wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gz # tar -xzvf tcl8.6.1-src.tar.gz # cd /usr/local/tcl8.6.1/unix/ # ./configure # make &…

yum離線安裝

安裝yum-plugin-downloadonly插件 yum install -y yum-plugin-downloadonly下載對應的軟件包&#xff0c;我們以mysql為例&#xff0c;終端輸入如下命令 yum install -y --downloadonly --downloaddir/soft/mysql mysql --downloaddir用來指定下載的路徑轉載于:https://www.cnb…

算法 --- 遞歸實現多級樹展開結構

說明 先根據數據渲染,然后再實現事件 渲染 在項目中,經常會給出一個深度不確定的數組,數字結構如下: data [{name: a, child:[{name: a1},{name: a2, child: [{name:a21}]}]},{name: b} ]要求將數組渲染成對應的目錄結構, 結構如下: <ul><li>a<ul><…

PYTHON自動化Day4-交換變量,字符串方法,拷貝,集合,文件,文件指針

一.判斷 # 非空即真、非0即真 # 不為空的話就是true&#xff0c;是空的話就是false # 只要不是0就是true&#xff0c;是0就是false# 布爾類型 # True False name input(請輸入你的名字&#xff1a;).strip() a [] #false d{} # false c 0 #false f tuple() #false e #fa…

Ajax-jsonp

一、什么是Jsonp jsonp(json with padding) 是一種“使用模式”&#xff0c;可以讓網頁從別的域名那獲取資料&#xff0c;即跨域讀取數據。 為什么會使用jsonp呢&#xff1f;因為同源策略&#xff08;數據來源一致&#xff09;&#xff0c;現在所有支持javascript 的瀏覽器都會…

javascript --- [讀書筆記] 回流與重繪 前端優化小結

1. 瀏覽器渲染原理 請說出: 從用戶在瀏覽器地址輸入網址,到看整個頁面,中間都發生了哪些事情? HTTP請求階段HTTP響應階段瀏覽器渲染階段 1.1 可能用到的知識 1.1.1 進程 Process、線程 Thread、 棧內存 Stack 進程: 就是開的每一個程序: QQ、網易云音樂、Typora、VSCode……

ARP協議,以及ARP欺騙

1.定義&#xff1a; 地址解析協議&#xff0c;即ARP&#xff08;Address Resolution Protocol&#xff09;&#xff0c;是根據IP地址獲取物理地址的一個TCP/IP協議。主機發送信息時將包含目標IP地址的ARP請求廣播到網絡上的所有主機&#xff0c;并接收返回消息&#xff0c;以此…

css --- [小結]讓盒子水平垂直居中的解決方案

描述 有如下模型,想辦法讓 <style>.box{width: 500px;height: 500px;background: skyblue;} </style> <div class"box"><div class"inner"></div> </div>想辦法讓inner在box中水平垂直居中 方案1: 使用絕對定位 讓…

數組洗牌 Fisher Yates

看播放器代碼時發現的這個洗牌算法&#xff0c;再網上查了一番 作用是把數組變成隨機序列&#xff0c;原理類似于從牌堆A中隨機抽牌放進牌堆B 代碼1&#xff1a; 返回一個由&#xff08;數組下標&#xff09;組成的數組 function random(length) {function shuffle (arr) {for…

一個不錯的MYSQL數據庫備份類,PHP版,一個文件,精簡版

1 <?php2 class DbManage {3 var $db; // 數據庫連接4 var $database; // 所用數據庫5 var $sqldir; // 數據庫備份文件夾6 // 換行符7 private $ds "\n";8 // 存儲SQL的變量9 public $sqlContent "";10 // 每條sql…

javascript --- 堆棧內存與閉包的作用

你可能會用到的 堆內存: 存儲引用類型值所在的空間棧內存: 存儲基本類型值和存儲代碼所在空間函數上下文: JS每一個函數在執行的時候都會創建一個執行上下文 1. 堆內存中的數字和字符串都是相等的 let a {}, b0, c0; a[b] marron; a[c] Mar console.log(a[b]) // Mar第一…

python_sting字符串的方法及注釋

string類型是python內置的類型&#xff0c;無需安裝 方法/屬性說明 capitalize() 把字符串的第一個字符改為大寫 casefold() 把整個字符串的所有字符改為小寫 center(width) 將字符串居中&#xff0c;并使用空格填充至長度width的新字符串 count(sub[,start[,end]]) …

作業3

import turtle turtle.bgcolor(red) turtle.color(yellow)turtle.fillcolor(yellow) turtle.begin_fill() for i in range(5):turtle.forward(100)turtle.right(144) turtle.end_fill() turtle.done()轉載于:https://www.cnblogs.com/zhangkef97/p/9016608.html

javascript --- [小練習]變量提升、優先級綜合

求下列函數輸出結果 function Foo() {getName function() {console.log(1)}return this } Foo.getName function() {console.log(2) } Foo.prototype.getName function() {console.log(3) } var getName function() {console.log(4) }function getName() {console.log(5) …

Confluence 6 自定義 Decorator 模板的宏和針對高級用戶

宏 頁面的某些部分使用的是 Velocity 宏進行創建的&#xff0c;包括導航欄。有關宏的創建&#xff0c;你可以參考頁面 Working With Decorator Macros 頁面中的內容。 針對高級用戶 velocity 目錄是 Confluence 首先進行模板搜索的查找路徑。你可以對 Confluence 的 velocity …

Matlab之rand(), randn(), randi()函數的使用方法

1. rand()函數用于生成取值在&#xff08;0~1&#xff09;之間均勻分布的偽隨機數。rand(n)&#xff1a;生成n*n的0~1之間的滿足均勻分布的偽隨機矩陣&#xff1b;rand(m,n)&#xff1a;生成m*n的偽隨機數&#xff1b;rand(m,n,double)&#xff1a;生成m*n的雙精度偽隨機數&am…

javascript --- [有趣的條件]雙等號的隱式調用和數據劫持

1 雙等號的隱式調用和數據劫持 求下面條件,在a為什么樣時,等號成立 if(a 1 && a 2 && a 3){console.log(等號成立) }1.1 雙等號的隱式轉換 首先得了解雙等號的隱式轉換規則 等式備注對象 字符串隱式調用 toString方法將對象轉換成字符串null undeifne…

分組查詢

1、簡單分組查詢 語法形式&#xff1a; select function() from table_name where condition group by field; 進行分組查詢時&#xff0c;分組所依據的字段上的值一定要有重復值&#xff0c;否則分組沒有任何意義。 2、實現統計功能分組查詢 關鍵字group by單獨使用時&#xf…

深入探討多模態模型和計算機視覺

近年來&#xff0c;機器學習領域在從圖像識別到自然語言處理的不同問題類型上取得了顯著進展。然而&#xff0c;這些模型中的大多數都對來自單一模態的數據進行操作&#xff0c;例如圖像、文本或語音。相比之下&#xff0c;現實世界的數據通常來自多種模態&#xff0c;例如圖像…