首页 文章

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

提问于
浏览 次
0

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

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

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

小提琴
http://jsfiddle.net/zuhloobie/2jtqroLL/1/

这是我想要完成的图形：
external-link-show

HTML TRIGGER为其中一个MINI NAV链接显示其隐藏的DIV

<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;    
            }       
        });
    });

隐藏在一起的隐藏日期之一的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>
jquery html css

2 回答

  • 0

    只需在用户点击链接时查询字符串，就可以在第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>
    回复于
  • 0

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

    // 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();

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

相关问题