我是JS的初學(xué)者,我在標(biāo)簽菜單的html中添加了標(biāo)簽滑塊,我將其分為3類:全部,創(chuàng)意和品牌,單擊li之一后如何顯示div?我已將類添加到li并為圖像創(chuàng)建了2個div,但是下一步該怎么做?這是一些代碼。$(document).ready(function(){$("ul li").click(function(e) { // make sure we cannot click the slider if ($(this).hasClass('slider')) { return; } /* Add the slider movement */ // what tab was pressed var whatTab = $(this).index(); // Work out how far the slider needs to go var howFar = 160 * whatTab; $(".slider").css({ left: howFar + "px" }); /* Add the ripple */ // Remove olds ones $(".ripple").remove(); // Setup var posX = $(this).offset().left, posY = $(this).offset().top, buttonWidth = $(this).width(), buttonHeight = $(this).height(); // Add the element $(this).prepend("<span class='ripple'></span>"); // Make it round! if (buttonWidth >= buttonHeight) { buttonHeight = buttonWidth; } else { buttonWidth = buttonHeight; } // Get the center of the element var x = e.pageX - posX - buttonWidth / 2; var y = e.pageY - posY - buttonHeight / 2; // Add the ripples CSS and start the animation $(".ripple").css({ width: buttonWidth, height: buttonHeight, top: y + 'px', left: x + 'px' }).addClass("rippleEffect");});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container3"> <h1>OUR PORTFOLIO</h1> <p>Lorem ipsum lorem exciting ipsum lore portfolio</p> <div class="portfolio"> <ul> <li class="all">All</li> <li class="creative">Creative</li> <li class ="branding">Branding</li> <li class="slider"></li> </ul> <div class="photo" id="photo"style="display:none"> <img src="img/icon2.png"/> </div> <div class="photo2" id="photo2"style="display:none"> <img src="img/icon3.png"/> </div> </div>
單擊jquery / javascript后顯示選項卡類
不負相思意
2021-04-30 20:17:43