綠色排版工具|熱門專題|網站地圖|移動官網
您的當前位置:網站首頁 > 建站教程 > wordpress教程 > 正文

WordPress文章頁實現所屬分類高亮顯示

來源:未知 編輯:小螞蟻站長 時間:2020-01-01 18:20:38 閱讀:
如何在Wordpress文章頁實現所屬分類高亮顯示呢?當用戶點擊某篇文章,文章所屬分類自動添加一個樣式高亮顯示。效果如下圖:

WordPress文章頁實現所屬分類高亮顯示

第一步:獲取文章所屬于分類,這個可以隱藏。


<div id="fltop" style="display:none;">                  <?php the_category(', ') ?> </div>

第二步:給頂級分類的二級分類列表添加一個ID;(方法見:文章頁獲取頂部父類下所有子分類列表)


<ul id="sidebarleft"> …… </ul>

第三步:使用JS獲取所屬分類的A標簽URL和列表所有A標簽的URL,并且進行對比判斷,如果包含就給A標簽添加一個class類:current-cat;


<script>                 //代碼來源:學做網站論壇 https://www.xuewangzhan.net/                 //獲取分類A標簽和列表所有的a標簽(返回節點對象)                    var myNav = document.getElementById("sidebarleft").getElementsByTagName("a");                    var myURL = document.getElementById("fltop").getElementsByTagName("a");                                   //循環div下面所有的鏈接,                    for(var i=0;i<myNav.length;i++){                    //獲取每一個a標簽的herf屬性                   var links = myNav[i].getAttribute("href");                        var myURL2 = myURL[0].getAttribute("href");                             //查看div下的鏈接是否包含當前窗口,如果存在,則給其添加樣式                   if(myURL2.indexOf(links) != -1){                     myNav[i].className="current-cat";                            }                  }                 </script>

第四步:在CSS中添加一個current-cat樣式,這樣就實現了點擊后高度顯示效果。

圖文精選:

Copyright?2012-2019 小螞蟻信息網版權所有 粵ICP備14061018號


鄭重聲明:本網站資源、信息來源于網絡,完全免費共享,僅供學習和研究使用,版權和著作權歸原作者所有,如有不愿意被轉載的情況,請通知我們刪除已轉載的信息。

Top 捕鱼游戏技巧大全