链接到不同页面的标题，并使段落在页脚链接中可见，而不是在链接页面上

link to heading on different page and make paragraph visible from footer link while not on linked-to page

本文关键字：链接 标题 段落      更新时间：2023-09-26

这个问题是这个问题的后续:我如何链接到一个标题，并导致点击事件触发，当链接在JavaScript中单击?

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

问题如下:在上面的链接中，没有提供任何解决方案，允许您不在服务页面(讨论的链接所在的页面)的情况。换句话说，如果你不在服务页面上，你点击一个链接到服务页面，js被调用，每一个发生的方式，除了段落没有展开。如果我在服务页面上点击其中一个服务页脚链接，一切都很好。

我如何让p显示:块;当我不在服务页面(我链接的页面)?

我试过窗口。地点，但好像行不通。我还尝试了一些我在网上找到的延迟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;
}

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

你应该看看data- attribute,timing events

见下面我的评论，但这解决了我的问题。无论我是否在服务页面上，我都可以点击到服务页面的页脚链接。

主要归功于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;
}
相关文章：