68.jq---tab选项实现网页定点切换

mac2022-06-30  60

 

{volist name="list" id="vo"}<div class="nav_div" style="position: relative;padding: 10px"> <span class="nav_span">.</span> <div class="nav_title" id="card{$vo.ard}"><a href="#card{$vo.ard}">{$vo.title}</a></div></div>{/volist} <div class="container" style="margin-bottom: 50px"> {volist name="list" id="vo"} <div id="card{$vo.ard}"> <h4>{$vo.title}</h4> {$vo.con} </div> {/volist}</div> <style> .card-active{ background: rgb(224, 236, 244); } .nav_title:hover a{ color:rgba(128, 197, 95, 1); }</style>

js:

$(function(){ var strUrl = window.location.href; var arrUrl = strUrl.split("/"); var strPage = arrUrl[arrUrl.length-1]; var carda= $(".nav_div").find(strPage).addClass("card-active"); $(".container").find(strPage).css("display","block"); $(".container").find(strPage).siblings().css("display","none"); console.log(strPage,carda,$(".container").find(strPage)); $(".nav_div").click(function(){ $(this).find(".nav_title").addClass("card-active"); $(this).siblings().find(".card-active").removeClass("card-active"); var zuo=$(this).find("a").attr("href"); $(".container").find(zuo).css("display","block"); console.log(zuo, $(".container").find(zuo)) $(".container").find(zuo).siblings().css("display","none"); })})

转载于:https://www.cnblogs.com/sqyambition/p/10711358.html

最新回复(0)