Question

这个问题是这个问题的后续问题： How do I link to a heading and cause a click event to fire when the link is clicked in JavaScript?

基本上我试图从任何页面上的页脚链接（所有页面的页脚都相同）并做两件事：移动到页面上的适当位置并显示以前隐藏的（display：none;）段落（p）。

以下是问题：在上面的链接中，没有提供任何解决方案，允许您不在服务页面上的情况（所讨论的链接所在的页面）。换句话说，如果您不在“服务”页面上，并且单击指向服务页面的链接，则会调用js，并且每次都会按照预期的方式进行，除非该段落未展开。如果我在服务页面上点击其中一个服务页脚链接，一切正常。

如何显示p：block;当我不在服务页面（我链接的页面）时？

我试过window.location，但这似乎没有用。我也尝试了一些我在网上发现的解决js延迟到页面加载的解决方案，但那些也没有用。

提前致谢。

ps - 我想看看是否有javascript解决方案，所以请不要jquery。

标记：

<div id="service1" class="service">
        <h2  class="page services" ><img class="img-bullet-services" src="websiteDot.png" alt="alt">service1</h2>
        <p class="p-on-white service-desc p-hide" >
           xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </p>
    </div>
    </br>
    <div id="service2" class="service">
        <h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">service2</h2>
        <p class="p-on-white service-desc p-hide" > 
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </p>
    </div>
<div id="col4-footer" class="four-cols-footer four-cols">
    <ul>
       <li style="list-style: none;"><h3><a class="a-bold" href="Services.php">Services</a></h3></li>

       <li><a href="Services.php#service1" data-toggle="service1" onclick="toggle(this)">service1</a></li>
       <li><a href="Services.php#service2" data-toggle="service2" onclick="toggle(this)">service2</a></li>

     </ul>
 </div>

JS：

var target, sericeDiv, pToDisplay
function toggle(link) {

    target = link.getAttribute("data-toggle");

    sericeDiv = document.getElementById(target)
    pToDisplay = sericeDiv.getElementsByTagName('p')[0]
    document.getElementById(target).className = "service-desc";
    pToDisplay.className = "p-on-white service-desc"

}

的CSS：

.p-hide{
    display: none;
}

Answer 1

我没有完全理解这个问题，但您可以将href设置为#设置数据属性，类似于data-href="your/location.html"并创建方法并设置它onclick=yourProcess()当您需要重定向时获取数据属性，如果您想延迟某些内容，可以使用setTimeout()

您应该查看data-attrib，timing events

我希望这会有所帮助......

Answer 2

请参阅下面的评论，但这解决了我。我可以点击转到服务页面的页脚链接，无论我是否在服务页面上。

主要归功于MikeVelazco。如果没有他的评论，我就无法做到这一点。

标记：

<div id="service1" class="service">
        <h2  class="page services" ><img class="img-bullet-services" src="websiteDot.png" alt="alt">Financial Analysis, Enterprise Performance, & 
            Reporting</h2>
        <p class="p-on-white service-desc p-hide" id="p-service1" >
           xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </p>
    </div>
    </br>
    <div id="service2" class="service">
        <h2 class="page services"><img class="img-bullet-services" src="websiteDot.png" alt="alt">Software, Systems, & Office Automation 
            Solutions</h2>
        <p class="p-on-white service-desc p-hide" id="p-service2"  > 
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </p>
    </div>
<div id="col4-footer" class="four-cols-footer four-cols">
    <ul>
       <li style="list-style: none;"><h3><a class="a-bold" href="Services.php">Services</a></h3></li>

       <li><a href="Services.php#service1" data-toggle="service1" onclick="toggle(this)">Financial Analysis & Reporting</a></li>

    </ul>
</div>

JS：

// link from footer link to p in services that needs to be displayed when you are on the services page already
function toggle(link) {
    var target, sericeDiv, pToDisplay;
    target = link.getAttribute("data-toggle");
    sericeDiv = document.getElementById(target)
    pToDisplay = sericeDiv.getElementsByTagName('p')[0]
    document.getElementById(target).className = "service-desc";
    pToDisplay.className = "p-on-white service-desc"

}

//when a footer link is clicked that goes to a service on the service page
//this makes the p below the heading display
function openP(){
    var theURL = document.URL;
    var gotArray = theURL.split("#");
    var pToDisplay = document.getElementById("p-" + gotArray[1]);
    pToDisplay.className = "p-on-white service-desc";
}
window.onload = openP();

的CSS：

.p-hide{
    display: none;
}

链接到不同页面上的标题，并从页脚链接显示段落，而不是链接到页面

2 个答案: