在页面打开/刷新时加载切换div,同时也从源页面传递变量

时间:2013-11-27 03:58:40

标签: javascript jquery

所以,我一直试图在过去的一天中弄明白这一点,进行了广泛的搜索,放弃并在这里发帖 - 第一篇文章顺便说一句。

简而言之,我需要加载一个打开 div id =“overview”的页面,然后在点击事件中关闭它,然后打开 div id =“cases”

通常我会使用一个简单的div替换,只需在 div id =“replacer”中加载内容,轻松自如,但是......

    <script>
     $(document).ready(function(){
       $("#cases").click(function(){
         $("#replacer").html('blah1');
            });
    $("#overview").click(function(){
         $("#replacer").html('blah2');
            });
        });
    </script> 

还有另一个问题,当用户关注来自另一个页面的特定链接时,我需要激活 div id =“cases”。要做到这一点,我已经将下面的怪物攻击在一起,并让// SOURCE OPENER脚本将源变量从源页面传递给加载案例。

但是,在下面的代码中,无论何时刷新页面,我都无法弄清楚如何在 div id =“overview”中显示内容。

所以,如果有人能帮我传递一个变量来打开上面的一个div或者看看下面的内容,并建议我认真地永远感激!请帮忙!!!

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<style>
 #contenido > div {display:none;}
</style>

<script>
var divState = {};
function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        divState[id] = (divState[id]) ? false : true;

    //close others
    for (var div in divState){
        if (divState[div] && div != id){
            document.getElementById(div).style.display = 'none';
            divState[div] = false;
        }
    }

    divid.style.display = (divid.style.display == 'block' ? 'block' : 'block');
}
}

// SOURCE OPENER 1//
$(document).ready(function() {
// parse the query params
var url_params = (window.location.search.substr(1)
  .split('&')
  .reduce(function(prev, curr) { 
      curr = curr.split('='); 
      if( curr.length > 1 ) { prev[curr.shift()]=curr.join('='); }
      return prev; 
  }, {}));

if( url_params.panel_open ) {
    // if "panel_open" was passed in the URL, then open the panel
    $(".panel").toggle("fast");
    divState['cases'] = true;
}

})

// SOURCE OPENER 2 //
$(document).ready(function() {
// parse the query params
var url_params2 = (window.location.search.substr(1)
  .split('&')
  .reduce(function(prev, curr) { 
      curr = curr.split('='); 
      if( curr.length > 1 ) { prev[curr.shift()]=curr.join('='); }
      return prev; 
  }, {}));

if( url_params2.feature_open ) {
    // if "feature_open" was passed in the URL, then open the panel
    $(".default").toggle("fast");
    divState['overview'] = true;
}

})
;

</script>
</head>
<html>
<body>

<a href="javascript:void(null)" onclick="showhide('overview');">Overview</a>
<a href="javascript:void(null)" onclick="showhide('cases');">Case</a>

<div id="contenido">
<div class="default" id="overview">Overview Stuff</div>
<div class="panel" id="cases">Case Stuff</div>

</div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

你可能想把你的css改为:
#contenido > div:not(#overview) {display:none;}