Jquery / Javascript URL参数显示div

时间:2017-04-20 04:29:38

标签: javascript jquery html

我正在尝试使用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>

0 个答案:

没有答案