Question

在一页上我有这个：
（1）迷你导航
（2）迷你导航（1）中的每个链接显示或隐藏其下方的div（思考标签）（3）每个隐藏的div（2）内是另一个show / hide div效果（想象手风琴）

在另一页上我想要这个：
*单击时链接，转到上面的页面，导航到正确隐藏的“选项卡”（2），然后展开（显示）手风琴（3）中的div。

问题
一切正常，但现在我想在另一个页面上实现一个链接，以显示第二个隐藏的div和一个手风琴。我不知道如何做到这一点。想法？想法？

FIDDLE
http://jsfiddle.net/zuhloobie/2jtqroLL/1/

以下是我想要完成的图表： external-link-show

用于显示其隐藏DIV的MINI NAV链接的HTML触发

<a href="#subDivTab1" class="subDivSwitchLink">overview</a>

MINI NAV的JQUERY DIV开关

$(function(){
$('a.subDivSwitchLink').click(function (e) {
    var $this = $(this),
    containerSelector = $this.attr('href'),
    $links = $('a.subDivSwitchLink');
    e.preventDefault();
    $('div.subDivSwitch').not(containerSelector).hide();
    $(containerSelector).show();
    $links.not($this).toggleClass('subTitleActive', false);
    $this.toggleClass('subTitleActive', true);
});
var target = '#'+'subDivTab1';
$('a[href="'+target+'"].subDivSwitchLink').click();
});

为隐藏的手风琴而言

        $(document).ready(function(){
        $('#drawer > ul > li:has(ul)').addClass("has-sub");
        $('#drawer > ul > li > a').click(function() {
            var checkElement = $(this).next();
            $('#drawer li').removeClass('active');
            $(this).closest('li').addClass('active');   
            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }
            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#drawer ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }
            if (checkElement.is('ul')) {
                return false;
            } else {
                return true;    
            }       
        });
    });

带有ACCORDION的隐藏DIV之一的HTML

<div id="subDivTab2" class="subDivSwitch">
<div class="subRightSectionTitle soft">hidden div title2
</div>
<div class="subRightSectionText ulineGray"><span class="subRightSectionTextHeader">hidden div text2</span>
</div>
<div id="drawer" class="softDrawer">
    <ul>
        <li><a href="#" onclick="return false;">hidden accordion title1</a>
            <ul>
                <li>hidden accordion text1</li>
            </ul>
        </li>
        <li><a href="#" onclick="return false;">hidden accordion title2</a>
            <ul>
                <li>hidden accordion text1</li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

当用户点击链接时，只需执行查询字符串，就可以向第1页的链接添加查询字符串

<a href="page2.html?showdiv=true">page2</a>

第一页的

读取查询字符串

<script>
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$( document ).ready(function() {
   if(getParameterByName('showdiv')=="true")
   {
         //show div and link.
   }
});
</script>

Answer 2

有几种方法可以通过链接传递所需的参数。您可以使用cookie或我使用的一种方法，即将链接url附加到查询参数。创建链接并添加？tab = 3。目标页面需要一个查询字符串解析器脚本来抓取您的使用，例如您的要求：＆＃39;导航到正确的隐藏＆＃34;标签＆＃34;然后扩展（显示）手风琴中的一个div＆＃39;。

＆＃13;

// plain vanilla javascript - to test, try pasting in Chrome console, append some parameters to your URL, for example: mypage.html?nav=4&accordian=7 

    function getURLparams(paramName) {
      var sURL = window.document.URL.toString();
      if (sURL.indexOf("?") > 0) {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);
        var i = 0;
        for (i = 0; i < arrURLParams.length; i++) {
          var sParam =  arrURLParams[i].split("=");
          arrParamNames[i] = sParam[0];
          if (sParam[1] != "") {
            arrParamValues[i] = unescape(sParam[1]);
          } else {
            arrParamValues[i] = "no values";
          }
        }
        for (i = 0; i < arrURLParams.length; i++) {
          if(arrParamNames[i] == paramName){
            return arrParamValues[i];
          }
        }
        return "no parameters";
      }
    }
   
   var navTarget = getURLparams('nav')
   var accTarget = getURLparams('accordian')
   
   // Now you can change nav 2 style and open accordian 3:
   //  var sLink = '#subLink' + navTarget;
   //  var sDivTab = '#subDivTab' + accTarget;
   //  sLink.css('font-size','24px');
   //  sDivTab.show();

＆＃13;

<!-- URL with parameter queries -->
<a href="http://www.example.com/targetPage.html?nav=2&accordian=3">Link to nav 2 and accordian 3</a>

＆＃13;

在一个页面上单击链接到另一个页面显示div并展开div

2 个答案: