javascript - 如何使用 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>

我有一个独特的情况想与大家讨论。我正在尝试创建一个具有圆形导航的网页，如此处所示 enter image description here

这些按钮中的每一个都会在单击时显示内容，例如页内链接。 JQuery 如图所示enter image description here

这个概念看起来很简单，强制隐藏所有内容，当用户单击一个按钮时，链接到该按钮的页面内容就会显示出来。当链接是内联或 block 显示时它有效，但是当在一个圆圈中时，链接不起作用，按钮内容不显示。有没有人处理过类似的问题？或者有人会有潜在的解决方案吗？对于问题的含糊不清，我深表歉意，但问题似乎是多方面的。任何建议或想法将不胜感激。

Answer 1

您确定您的 jQuery 引用有效吗？我没有看到代码有任何问题，单击链接时应该会触发 click 事件。检查控制台是否有任何错误，我坚信 jQuery 可能无法加载。