Question

I am running into a problem with an anchor tag. I want to be able to to link from one page to a certain part of a page that is hiding due to its functions. Here is the html

<div class="row">
                <div class="col-sm-4">
                    <a class="button" id="showdiv1"><img src="<?php echo get_template_directory_uri(); ?>/images/collaborate-b.svg"></a>
                </div>
                <div class="col-sm-4">
                    <a class="button" id="showdiv2"><img src="<?php echo get_template_directory_uri(); ?>/images/organize-b.svg"></a>
                </div>
                <div class="col-sm-4">
                    <a class="button" id="showdiv3"><img src="<?php echo get_template_directory_uri(); ?>/images/accelerate-b.svg"></a>
                </div>
            </div>

            <div class="pillars-layout">
                <div id="div1">Content One</div>
                <div id="div2" style="display:none;">Content Two</div>
                <div id="div3" style="display:none;">Content Three</div>
            </div>

jQuery

$(function() {
$('#showdiv1').click(function() {
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click(function() {
    $('div[id^=div]').hide();
    $('#div2').show();
});

$('#showdiv3').click(function() {
    $('div[id^=div]').hide();
    $('#div3').show();
});})

So in this case I am hiding elements and showing. But lets say when I come from my other page I want it to display Content Two with an anchor. Would You know a solution for this?

Answer 1

好的，我假设该页面的链接类似于：www.mydomain.com/page#div2

$(function() {
    var url = window.location.href,
    hash = url.substring(url.indexOf("#")+1);
    if(hash !== ""){
        $(".pillars-layout").children().each(function(index) {
            $(this).hide();
        });
        $('#' + hash).show();
    }
});

这将在单击链接后加载的页面上进行。

How to link anchor to a show and hide function on another page

1 个答案: