通过超链接打开摘要标记

时间:2016-01-02 22:58:17

标签: javascript php html google-chrome

我想打开<summary>标记,并在点击超链接时查看其内容。

我该怎么做呢?

目前,我只能在点击超链接时查看摘要标记。

当我说摘要标签时,我的意思是

<summary>  

这是一个片段,感谢Praveen Kumar

echo '<a href="#" onclick="det.attribute("open","false"); return false;">'.$nextLine.'</a>';

我想引用peak1图像

echo '
                    <section>
                        <details>
                            <summary> Peak Image </summary>';
                                # create a bookmark with the id attribute. Used to link from Peak Table rows
                                # create collapsable windows for each peak image 
                                echo '
                                    <details id="det"> 
                                        <summary> Peak 1 </summary>';                                   
                                        echo '<h2 id="peak1">Peak 1</h2>
                                        <img src="open/images/peak1.png" alt="Peak1" height="2500" width="1000">
                                    </details>

2 个答案:

答案 0 :(得分:1)

你在找这样的东西吗?

&#13;
&#13;
a + .meta {display: none;}
a:focus + .meta {display: block;}
&#13;
<a href="#">Hello</a>
<div class="meta">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem sit sed, aspernatur in doloribus magnam ad deleniti. Aperiam at illo nihil repellat placeat aspernatur, unde soluta aliquam nesciunt beatae.</p>
  <p>Eaque soluta, aliquam aut recusandae voluptates debitis dolore inventore itaque eligendi optio numquam architecto labore neque distinctio quia ducimus qui fuga. Dolores distinctio, tempore iusto odio ipsa, quidem est rem.</p>
</div>
<br />
<a href="#">Hello</a>
<div class="meta">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem sit sed, aspernatur in doloribus magnam ad deleniti. Aperiam at illo nihil repellat placeat aspernatur, unde soluta aliquam nesciunt beatae.</p>
  <p>Eaque soluta, aliquam aut recusandae voluptates debitis dolore inventore itaque eligendi optio numquam architecto labore neque distinctio quia ducimus qui fuga. Dolores distinctio, tempore iusto odio ipsa, quidem est rem.</p>
</div>
<br />
<a href="#">Hello</a>
<div class="meta">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem sit sed, aspernatur in doloribus magnam ad deleniti. Aperiam at illo nihil repellat placeat aspernatur, unde soluta aliquam nesciunt beatae.</p>
  <p>Eaque soluta, aliquam aut recusandae voluptates debitis dolore inventore itaque eligendi optio numquam architecto labore neque distinctio quia ducimus qui fuga. Dolores distinctio, tempore iusto odio ipsa, quidem est rem.</p>
</div>
&#13;
&#13;
&#13;

或者,通过超链接打开摘要标记:

&#13;
&#13;
<a href="#" onclick="det.setAttribute('open', 'true'); return false;">Open the Summary Tag</a> &bull;
<a href="#" onclick="det.removeAttribute('open'); return false;">Close the Summary Tag</a>
<br />
<br />
<details id="det">
  <summary>Click on the Link</summary>
  <p>Hey, I am open!</p>
</details>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

我认为你所寻找的是一个模态窗口。

以下是如何执行此操作的教程:

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/