如何在同一页面中隐藏链接的内容?

时间:2012-10-26 09:37:03

标签: html blogger

我正在尝试创建一个博客页面。在我的博客页面中,我想在同一页面上提供指向该地点的链接。我怎么能用html做到这一点?

Ex sort of table of the content

   |------------------------------|
   |  List of smt                 |
   |     *X                       |
   |     *Y                       |
   |     *Z                       |
   |     *T                       |
   |------------------------------|

当用户对X之类的链接进行预设时,同一页面将加载X的内容。        X的内容

   |------------------------------|
   |           X                  |
   |   X is .....                 |
   | .......................      |
   | .. . X is used in .....      |
   |------------------------------|

2 个答案:

答案 0 :(得分:0)

我不确定这对你是否有帮助,但你可以用一些CSS做到吗?

如果你在一个页面上拥有所有内容,你可以创建带有id的div,然后链接到每个ID,它将向下滚动到那个...你可以将div隐藏在页面之外,当点击时它们会出现...... < / p>

如果这听起来很有用,我可以提供一些代码

代码:据我所知,您希望链接到页面的其他部分(最有可能进一步向下)

这是一个选项,让我知道它是否对您的问题有效:

{CSS}
#partofpage {



}


{HTML}
<a href = "#partofpage">Link</a> 

如果您想要隐藏div或使其可见:

{CSS}
#partofpagehidden {

visibily : hidden; /*if you put "Collapse" then it would hide a column/row of a table*/
OR

display: none; /*This would take the element away and it wont take up any space,      visibility would take it away but it would take up the same space*/




}
#partofpageshown {

visibility: visible;

}

答案 1 :(得分:-1)

http://www.dynamicdrive.com/forums/showthread.php?49019-jQuery-hide()-and-show()-based-on-a-select-element

Targeting elements to show/hide based on matching ids and classes

<HEAD>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#bloc").change(function() {

    if ($("#bloc").val() == 2)
    {
        $("#bdays, #bdays2, #brea, #brea2").show("fast");
    }
    else
    {      
        $("#bdays, #bdays2, #brea, #brea2").hide();
    }

    });

    if ($("#bloc").val() == 2)
    {
        $("#bdays, #bdays2, #brea, #brea2").show("fast");
    }
    else
    {      
        $("#bdays, #bdays2, #brea, #brea2").hide();
    }

});
 </script>
</HEAD>
<BODY>
<select id="bloc">
<option value="1">Normal</option>
<option value="2">Blocked</option>
</select>

<table border="1">
    <tr>
        <td>value 1</td>
        <td>value 2</td>
    </tr>
    <tr>
        <td>
            <div id="bdays">
            Days:
            </div>
        </td>
        <td>
            <div id="bdays2">
            <input type="text" id="VIN" value="">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="brea">
            Reason:
            </div>
        </td>
        <td>
            <div id="brea2">
            <input type="text" id="VIN" value="">
            </div>
        </td>
    </tr>
</table>
</BODY>

试试这个。