jq寫點選那個那個顯示其他隱藏用到toggleClass
阿新 • • 發佈：2019-02-19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } body { margin: 100px; } .one { width: 200px; margin-bottom: 5px; } .one a { background: red; text-decoration: none; display: block; text-align: center } .one p { display: none; background: green; } </style> <script src="js/jquery-2.1.4.min.js"> </script> <script> $(function() { $('.one a').click(function() { // 判斷當前點選的選項有沒有active這個類名 if ($(this).hasClass('active')) { //如果有就讓它的兄弟元素隱藏 $(this).siblings('p').hide(); } else {
//不過沒有active這個類就 var num = $(this).parent().index(); $('.one').eq(num).find('p').show().parent().siblings('.one').find('p').hide(); } $(this).toggleClass('active'); //這個作用是 點選有這個類再次點選就沒這個類 $(this).parent().siblings('.one').find('a').removeClass('active'); //這句作用是讓它的.one元素下面的 其他元素移除這個類 }) }) </script> </head> <body> <div class="one"> <a href="javascript:;">活動1</a> <p class="p"> 1日上午，習近平總書記到山西考察調研。從北京直飛呂梁，隨後驅車1個半小時來到興縣，參觀晉綏邊區革命紀念館，向革命烈士敬獻花籃。習近平說，革命戰爭年代，呂梁兒女用鮮血和生命鑄就了偉大的呂梁精神。我們要把這種精神用在當今時代，繼續為老百姓過上幸福生活、為中華民族偉大復興而奮鬥</p> </div> <div class="one"> <a href="javascript:;">活動2</a> <p class="p">2日上午，習近平總書記到山西考察調研。從北京直飛呂梁，隨後驅車1個半小時來到興縣，參觀晉綏邊區革命紀念館，向革命烈士敬獻花籃。習近平說，革命戰爭年代，呂梁兒女用鮮血和生命鑄就了偉大的呂梁精神。我們要把這種精神用在當今時代，繼續為老百姓過上幸福生活、為中華民族偉大復興而奮鬥</p> </div> <div class="one"> <a href="javascript:;">活動3</a> <p class="p">3日上午，習近平總書記到山西考察調研。從北京直飛呂梁，隨後驅車1個半小時來到興縣，參觀晉綏邊區革命紀念館，向革命烈士敬獻花籃。習近平說，革命戰爭年代，呂梁兒女用鮮血和生命鑄就了偉大的呂梁精神。我們要把這種精神用在當今時代，繼續為老百姓過上幸福生活、為中華民族偉大復興而奮鬥</p> </div> </body> </html>