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

所示

这个概念看起来很简单，强制所有内容隐藏，当用户点击按钮时，链接到该按钮的页面内容会显示。当链接是内联或块显示时它可以工作，但是当在一个圆圈中，链接不起作用时，按钮内容不会显示。有没有人处理类似的问题？或者任何人都有可能的解决方案？我为问题的模糊性道歉，但这个问题似乎是多方面的。任何建议或想法将不胜感激。

Answer 1

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

如何使用HTML，CSS和JQuery在循环设计中创建交互式导航

1 个答案: