Question

我创建了这个网站：http://www.successwithenergycode.com/

并且，我希望能够创建直接链接到页面的特定状态部分的外部链接。目前，设置状态特定资源是根据用户点击地图的位置填充的，并且不是一次全部显示。有没有为什么“激活”某个状态然后创建一个链接？

这是地图的代码：

 <section>

      <h3><p>southeast energy Efficiency Association</p>
      <p>Click on a state to access resources</p></h3>

      <div class="regionLogoSE">
        <a href="http://www.seealliance.org/" target="_blank">
          <img src="images/seea_logo.png" alt="Southeast Energy Efficiency Association logo">
        </a>
      </div>

      <div id="list">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 547.2 552.8">

    <style>
        path:hover { transition-duration: .56s; }
    </style>

<a href="#alabamar" >
    <path id="AL" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 

     d="M174.5,281....2-0.5,0.5L174.5,281.3z"/>
</a>

<a href="#northcr" >
    <path id="NC" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"
      d="M456.1,206.5l-31.6-34.7l-32.2-0.9
        c0.2-1.6,0.4-3.3,....7.1,205.7,456.1,206.5L456.1,206.5z"/>
</a>

<a href="#virginiar" >
    <path id="VA" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M526.9,...5,538.5,54.7,538.4,55C537.8,56.3,538.5,54.7,538.4,55z"/>
</a>

<a href="#kentuckyr" >
    <path id="KY" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M187.6,61.2c0.7.....2,61.3,187.6,61.2C187.7,61.4,188,61.2,187.6,61.2z"/>
</a>

<a href="#tennr" >
    <path id="TN" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 
     d="M147.7,108.9c-....47.7,108.9z"/>
</a>

<a href="#southcr" >
    <path id="SC" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
    d="M389.4,273.2...4C387.1,271.7,388.7,273,389.4,273.2C389.8,273,388.9,273,389.4,273.2z"/>
</a>

<a href="#floridar" >
    <path id="FL" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 
         d="M205,335.5c1.1....5,542.9C373.6,543.8,375.5,542,374.5,542.9z"/>
</a>

<a href="#missr" >
    <path id="MS" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');" 
      d="M97.9,238.3c-0.5.....4,4.9,214.4z"/>
</a>

<a href="#louisianar" >
    <path id="LA" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M17.8,238.3V276c1......8,238.3z"/>
</a>

<a href="#georgiar" >
    <path id="GA" fill-rule="evenodd" clip-rule="evenodd" fill="#288585"  onmouseover="evt.target.setAttribute('fill', '#fce149');"
         onmouseout="evt.target.setAttribute('fill', '#288585');"  
     d="M273.1,312c0.3.....c-0.7,1.1,0.9,2.7,1.7,3.5c0.8,0.8,0.6,2.3,0.8,3.4
        L273.1,312z"/>
</a>


<polyline id="LA_stroke" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" points="
    97.9,238.3 17.8,238.3 17.8,238.3 "/>
<path id="MS_stroke" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
    M182.8,164.6l-59....1,1.5,1,2.4c0.1,1.6,1.4,4.1,1.1,5.4"/>
<path id="GA_stroke" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
    M387.7,276.2c0.2-0.9,0....-2.4,3.3-3.2c2.3-1.5,6.6-2.1,8.1-4.4c1.5-2.5,3.5-3.6,5.6-5.4c1.6-1.3,3.2-4-0.1-3.8"/>
<g id="AL_stroke">

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M177.3,334.8c0,0-0.2,0.2-0.5,0.5l-2.4-53.9l10.9-109.8c-0.7-2.4-1.2-4.8-2.6-6.9c24.3,0,48.7,0.1,73,0.1"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M272.5,308.2c0.8,0.8,0.6,2.3,0.8,3.4l-0.1,0.4v0h-72.9c-0.1,1.6-0.5,3-0.7,4.5c-0.2,1.7,0.3,1.4,1.5,2.6c0.9,0.8,0.7,2.1,1.3,3
        c2,1,4.2,2.4,2.9,5c-0.5,1.1-0.5,1.7-0.4,2.9c0.1,1.7,1,1.6,1.7,3.1c0,0-0.4,0.6-1.5,2.5c-1,0.1-2.6,0.4-2.6,0.4
        c-0.3,0.3-0.5,0.5-0.8,0.8c-0.6,0.7-1.3-0.6-1.4-0.5c-0.5,0.7,0.3,1.7-0.6,2.5"/>
</g>
<g id="TN_stroke">

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M292.8,164.6"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M139.4,127.8c0.7,0.9,1.9,2.4,0.1,2.9c-2.2,0.6-0.8,2,0,3.1l-2.6,2.4c-1,0.2-5.6,0.9-3.8,2.6c0.9,0.8,2.2,1.4,1.5,2.8
        c-0.4,0.9-1.3,2.4-2.5,2.1c-2.2-0.5-0.2,4-1.6,3.6c-1.2-0.4-1.4-1.2-2.4,0c-0.3,0.4-2.1,3.9-1.1,3.2c0.4-0.2,2.1-2,2.4-1.3
        c0.4,0.8,0,2-0.1,2.8c-0.1,0.9-1.8,0.9-2,1.9c-0.1,0.4,1.6,0.8,1.8,1.5c0.3,1,0.4,2.1,0.5,3.1c0.1,0.8-2.7,1.6-3.1,2.7
        c-0.4,1.1,0.3,1.2-1,1.6c-0.7,0.2-3.1,0.6-2,1.6"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M366.6,108.4c-0.2-0.9,0.6-2.1,0.7-3l-180.4-2.5l0.1,6.1l-39.3-0.1c-0.1,0.1-0.1,0.2-0.1,0.2"/>
</g>
<g id="NC_stroke">

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M292.8,164.6l-0.1-6c1-0.4,1.5-6,3.8-3.3c0.6,0.7,2.2-0.2,2.9-0.6c1.1-0.6,0.8-2.3,1.6-3.1c0.8-0.8,0.3-1.9,0.7-2.7
        c0.4-0.9,1.3-1.7,2-2.4c1.5-1.5,2.2-2,4.4-2c1.6-1.1,3.7-1,5.5-0.7c0.6,0.1,2.1,0.5,2.5,0c0.9-1.4,1.6-2.1,3.2-2.5
        c1.9-0.5,3.2-2.8,5.2-3.4c1.1-0.3,1.9-2.1,2.9-2.1c0.4,0,0.3-0.6,0.6-0.6c0.7,0,1.3,0.8,2,0.9c1.1-1,3.5-2.9,2.5-4.4
        c-2.1-3.5,2.9-0.8,3.4-1.4c0.4-0.6,0-1.4,0.6-2.1c0.7-0.8,1.6-1.6,2.6-2c0.6-0.2,2.1-0.2,2.4,0.6c0.4,0.8-1,1.2,0.5,1.7
        c1.4,0.5,3.1-0.9,3.7-2.1c1.2-2.3,2.2-2.9,4.5-3.7c1.1-0.4,4.5-0.9,4.5,0.8c0,1.9,3.5-0.7,3.8-1.6c0.7-2,1.8-4.1,3.2-5.7
        c0.8-0.9,1.9-1.4,3.1-1.6c0.1,0,1.4,0.2,1.3,0.3c0.4-0.4-0.8-1.7-0.5-2.4c0.2-0.5,0.7-1.9,1.1-2.3c0.6-0.6,0.1-0.9-0.1-1.7
        c-0.2-0.9,0.6-2.1,0.7-3c9.7,0.7,19.5,1.7,29.2,1.7c15.7,0,31.5,0,47.2,0c27.7,0,55.4,0,83.1,0"/>

        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-miterlimit="10" stroke-dasharray="3.823,7.6468" d="
        M458.5,206.5c-1-0.4-1.4-0.8-2.4,0l0,0l-31.6-34.7l-32.2-0.9c0.2-1.6,0.4-3.3,0-4.9c-0.5-1.9-2.5-3.5-3.3-5.4
        c-0.7-1.5-2.5,2-3.7,1.2c-0.5-0.3-0.4-1.2-0.5-1.7c-0.1-0.8-1.1-1.2-1.6-1.9c-9.3-0.3-18.6-0.6-27.9-0.8c-1.2,0-3.2,0.3-4.1-0.7
        c-0.5-0.6-2.6,2-4.1,0.1c-0.1-0.1-2,1.5-2.7,1.6c-1.1,0.3-2.6,0.2-3.6,0.8c-1.8,1.1-3,1.9-5,2.7c-1.2,0.5-7.2,1.3-7.3,2.6"/>
</g>
</svg>

      </div>

    </section>

以下是各州的示例代码：

<section id="alabamar">
    <section class="statetitle">
      <h3>Alabama Resources</h3>
      <p>Click on the links below to access checklists and tech tips</p>
    </section>


    <article class="resourceWrap">

      <div class="techTips">

        <div >
          <img src="images/techtip_icon2.png" alt="Builders Techtip icon">
          <span class="techTipsHead"><p >Tech Tips</p></span>
        </div>

        <ul>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Foundation.pdf" target="_blank"><li><p>Foundation</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Framing.pdf" target="_blank"><li><p>FRAMING</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_HVAC.pdf" target="_blank"><li><p>HVAC INSTALLATION</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Electrical.pdf" target="_blank"><li><p>ELECTRICAL</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Plumbing.pdf" target="_blank"><li><p>PLUMBING</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_AirSealing.pdf" target="_blank"><li><p>AIR SEALING</p></li></a>
          <a href="pdfs/SEEAWEB0001-SW2009IECC_Alabama_TechTips_Insulation.pdf" target="_blank"><li><p>INSULATION</p></li></a>
        </ul>
      </div>

Answer 1

我并非100％确定我理解您的代码，但我认为这会有效。

首先，添加如下的css代码：

section:target
{
    display: block;
}

:target伪选择器意味着此样式适用于目标元素。例如，此网址http://example.com/page.html#target的目标元素将是id='target'的目标元素。这将允许您仅显示您要链接的部分。如果你想让它滚动到那个部分，我想你想在你希望它滚动到的位置放一个与目标同名的锚，如下所示：

<h3><a name='alabamar'>Alabama Resources</a></h3>

现在，只需将#alabamar附加到包含元素section#alabamar的网页的网址，就会显示正确的信息，页面会向右滚动。

但是，您还有一个问题。您是否希望链接转到您链接到的域：www.successwithenergycode.com？那里的页面只有一个框架，用于保存真实网站。这将使您很难在真实网站中将链接转到您想要的位置，而不是仅仅将您带到托管框架的域的不同部分。

旁注：框架很讨厌。无论何时我个人访问网页，我都会注意到这样做，我点击右键并按下＆＃34;仅显示此框架＆＃34;。有关不使用框架的更多原因，请参阅此Stack Overflow question。

为隐藏的部分创建直接外部链接

1 个答案: