使用&#; href'达到(即取消隐藏)特定div从其他页面

时间:2015-02-21 05:46:44

标签: javascript jquery html hyperlink href

有一个带有3 div的pageA(考虑)。我也在另一个页面中有链接。当用户点击链接时,他们必须到达pageA中的第3个div。怎么做?

  

在我的代码中,所有div都被隐藏,除了那个被选中的div   时间。所以不需要滚动。

Demo

HTML:(pageA.html中)

    <div id="mws-navigation">
        <ul id="link">
            <li class="" data-related="a" id="a1"><a href="#a"><i class="icon-book"></i>A</a></li>
            <li data-related="b" class="" id="b1"><a href="#b"><i class="icon-search"></i>B</a></li>
          <li data-related="c" class="" id="c1"><a href="#c"><i class="icon-calendar"></i>C</a></li>    
        </ul>
    </div>         
<!-- Main Container Start -->
<div id="mws-container" class="clearfix">
    <!-- Inner Container Start -->
        <div id="a" class="tab">
            aaaa
        </div>
        <div id="b" class="tab"> 
            bbbb
        </div>
        <div id="c" class="tab"> 
           cccc
        </div>
</div>

页面B.html:

<a href="PageA.html#c">vvv</a>// this link will be in other page(to reach C)

//我必须在herf=""中提供什么才能达到特定的div

JQuery的:

$(function()
    {

            $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#a').show();
            document.getElementById('a1').className='active';
            $('#link li').click(function(e){
            $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#'+$(this).attr('data-related')).show();
            e.preventDefault();
});
    });

有什么建议吗?

2 个答案:

答案 0 :(得分:1)

好的,所以我认为你说你希望根据用户点击来自另一个页面的内容来展示和关注特定元素。

在pageB上为hrefs中的查询字符串添加一个参数,如下所示:

<a href="PageA.html?showdiv=c">vvv</a>

如果您有服务器端访问权限 - java,php或其他什么,那么我建议使用它来处理查询字符串并在第A页上为您的div添加一个类

<div id="c" class="tab showAndFocus"> cccc</div>

var myElementToShow = $(".showAndFocus");
myElementToShow.show();
myElementToShow.focus();

但是,如果您只有jquery / javascript来执行此操作(即没有服务器端可以帮助您使用查询字符串),那么您可以访问查询字符串参数,如所讨论的here

var urlParams;
(window.onpopstate = function () {
    var match,
       pl     = /\+/g,  // Regex for replacing addition symbol with a space
       search = /([^&=]+)=?([^&]*)/g,
       decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
       query  = window.location.search.substring(1);

       urlParams = {};
       while (match = search.exec(query))
           urlParams[decode(match[1])] = decode(match[2]);
})();

获得查询字符串后,您可以轻松获取想要显示的div ...

var myElementToShow = $("#"+urlParams.showdiv);
myElementToShow.show();
myElementToShow.focus();

答案 1 :(得分:0)

您可以在页面加载时读取location.hash - 在jQuery加载($)函数