我正在尝试使用Jquery / Javascript动态显示带有URL参数的某些div。我已成功创建了URL参数函数,方法是将?s = business,?s = design和?s = content添加到url的末尾,但是当点击关闭使用URL参数打开的div时,div.yoo不会再现。另外,我想阻止在地址栏中显示?s = design,?s = content或?s = business。想法?
我有以下HTML:
<div class="design">
<div>
<div class="up"></div>
<div class="yoo">
<h2>Title 1</h2>
</div>
<div class="yep" id="design">
<div class="up active"></div>
<h2>Title 1</h2>
<p>content 1</p>
</div>
</div>
</div>
<div class="content">
<div>
<div class="up"></div>
<div class="yoo">
<h2>Title 2</h2>
</div>
<div class="yep" id="content">
<div class="up active"></div>
<h2>Title 2</h2>
<p>content 2</p>
</div>
</div>
</div>
<div class="business">
<div>
<div class="up"></div>
<div class="yoo">
<h2>Title 3</h2>
</div>
<div class="yep" id="business">
<div class="up active"></div>
<h2>Title 3</h2>
<p>content 3</p>
</div>
</div>
</div>
我有以下javascript:
<script>
$('.design').click(function(){
$('.design').addClass('active');
$('.design .yep').slideToggle('slow');
$('.design .yoo').toggle(200);
$('.design > div > .up').toggle(200);
});
$('.content').click(function(){
$('.content .yep').slideToggle('slow');
$('.content').addClass('active');
$('.content .yoo').toggle(200);
$('.content > div > .up').toggle(200);
});
$('.business').click(function(){
$('.business .yep').slideToggle('slow');
$('.business').addClass('active');
$('.business .yoo').toggle(200);
$('.business > div > .up').toggle(200);
});
</script>
<script type="text/javascript">
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('s');
$(document).ready(function() {
if (dynamicContent == 'business') {
$('#business').toggle();
}
else if (dynamicContent == 'design') {
$('#design').toggle();
}
else if (dynamicContent == 'content') {
$('#content').toggle();
}
else {
$('#design').toggle();
}
});
</script>