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

I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here

Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here

The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.

Answer 1

Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.