如何使用HTML，CSS和JQuery在圓形設計中創建交互式導航

Question

 // JavaScript Document $('.page').hide(); $(".btns").click(function(e){ e.preventDefault(); //this method stops the default action of an element from happening. var $me = $(this); //$(this) references .btns, the object in local scope. var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03. $('.page').hide(); //hides all pages $myContent.fadeIn();//fades in clicked href connected to btn $(".btns").removeClass('selected');// $me.addClass('selected'); }); 

 *{ border-spacing: 0px; } body{ margin: 0px; padding: 0px; } .circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/ border: dashed 1px; border-radius: 50%; margin: 1.75em auto 0; } .circle-container a { display: block; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; } .circle-container img { display: block; width: 100%; } .deg0 { transform: translate(12em); } 

  <div class="body_content"> <div class="page" id="page_01"> <h2>1. Category 1</h2> </div> </div> <div class="circle-container"> <nav class="navigation"> <a href="#page_01" class="btns deg0" > <img id="one" src="imgs/button.png" alt="page01"/> </a> </nav> </div> 

我有一個獨特的情況，想與大家討論。 我正在嘗試創建一個具有圓形導航的網頁，如下圖所示在此處輸入圖片描述

單擊這些按鈕中的每個按鈕都會顯示內容，例如頁面內鏈接。 jQuery如圖所示， 在此處輸入圖像描述

該概念似乎很簡單，可以強制隱藏所有內容，當用戶單擊按鈕時，將顯示鏈接到該按鈕的頁面內容。 當鏈接以內聯或塊顯示時，它起作用，但是當圓圈時，鏈接不起作用，則按鈕內容不顯示。 有沒有人處理過類似的問題？ 還是會有人有潛在的解決方案？ 對於問題的模糊性，我深表歉意，但問題似乎是多方面的。 任何建議或想法將不勝感激。

Answer 1

您確定您的jQuery參考有效嗎？ 我看不到代碼有任何問題，單擊鏈接時應觸發click事件。 檢查控制台是否有任何錯誤，我堅信jQuery可能不會加載。