Question

我开发了此切换菜单，该菜单还显示每个主题的引用。我唯一想知道的是如何使用来自另一个页面的链接切换特定主题。下面的工作示例。谢谢你的期待。

jQuery( document ).ready( function( $ ) {

	   $(".faqs dd").hide();
    $(".faqs dt").click(function () {
        $(this).next(".faqs dd").slideToggle("slow").siblings(".faqs dd:visible").slideUp("slow");
        $(this).toggleClass("expanded");
		  $(this).siblings(".faqs dt").removeClass("expanded");
		
		
  if($(".faqs dt").hasClass("expanded") == true) {
         // hide open subcontents
        $('.subcontent:visible').hide();
		  $('.mainquote:visible').hide();
        // fade in new selected subcontent
        $('.subcontent[id='+$(this).attr('data-id')+']').delay(500).fadeIn();    
		 	 } else {
				  $('.subcontent:visible').hide(); } 
			 	
		     });	
			  });

dl dt,
dl dd {
  display:inline-block;
  *display:inline;
  font-weight: normal;
  vertical-align:top;
  float:left;
   width:100%;
}


.faqs dt, .faqs dd { padding: 0 0 0 30px; margin: 2px 0 0px 0;
	-ms-word-break: normal;
	word-wrap: normal;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none; }

.faqs dt {font-weight:bold;}	

.faqs dt {cursor: pointer; background: url(http://www.evolvedstudio.com/plus_orange.png) no-repeat left; vertical-align:top; }
.faqs .expanded { background: url(http://www.evolvedstudio.com/minus_orange.png) no-repeat left; vertical-align:top; }

.subcontent {display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subcontent" id="123"><em>quote1</em></p></div>


<div class="subcontent" id="124"><em>quote2</em></p></div>

<dl class="faqs">

<dt data-id="123">Topic 1</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</dd>

<dt data-id="124">Topic 2</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>

</dl>

Answer 1

捕获哈希值和

$(function(){

   var hash = window.location.hash.substr(1);
   showTopic(hash);

});

function showHash(s){
    if(s=="") return;
    $(".dt_"+s).trigger("click");
}

并将html更改为

<dt data-id="123" class="dt_topic1">Topic 1</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</dd>

<dt data-id="124" class=dt_topic2"">Topic 2</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>

即。只需在dt

上添加一个班级

并创建filename.html#topic1或filename.html#topic2

等链接

jquery从外部链接打开切换

1 个答案: