Question

我想打开<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>

Answer 1

你在找这样的东西吗？

＆＃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;

<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;

Answer 2

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

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

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

通过超链接打开摘要标记

2 个答案: