Question

我想在我的网页上添加一些链接。我正在使用php开发我的网页当用户单击其中任何一个时，与该链接对应的内容将显示在其下方而不刷新整个页面我知道这是一个简单的基础，但我不知道javascript很多工作... 任何人都可以帮助我......

link1   link2   link3   link4   link5


content......
...................
...................
...................

当点击link1时，它会显示一组内容，或者如果link2则显示另一组内容，依此类推......不刷新页面

Answer 1

假设您有一些HTML，例如：

<a href="#1">link1</a>
<a href="#2">link2</a>
<a href="#3">link3</a>
<ul>
    <li id="content1"><a name="1"></a>Content1</li>
    <li id="content2"><a name="2"></a>Content2</li>
    <li id="content3"><a name="3"></a>Content3</li>
</ul>

CSS类似于：

ul li  {display:none;}

然后你可以使用jQuery：

$('a').click(function(){
    var contentId = $(this).attr('href').substr(1);
    $('ul li:visible').hide(); //Hide any currently visible content areas
    $('#content'+contentId).show(); //Show the content area that corresponds to the link
    return false; //This stops the default behaviour of the link
});

上面的代码只是在点击各种链接时隐藏并显示各种内容区域。在这个例子中使用了jQuery来简化它，在标准JavaScript或任何其他框架中很容易实现相同的功能。此外，如果JavaScript不可用，那么链接将链接到内容中的锚点作为后退。

当然，您可以将AJAX用于此类功能，但如果内容不是那么大，它可能会超过顶级。使用AJAX的最简单（跨浏览器兼容）方式是使用jQuery。

Answer 2

您可以使用div并将其属性设置为隐藏，然后单击以显示你需要一个例子吗？

Answer 3

See Working Demo

在我的博客上看到这篇文章：

Javascript: Active Content

Answer 4

你应该查找JQuery。他们有一个很好的框架工作，你可以用来得到像这样的东西加上例子。你也可以在google上搜索“php and Jquery”，它应该让你开始走上正轨。尝试学习villina JavaScript，这对你一路走来都很有帮助。

使用Javascript链接以动态显示内容而无需刷新

4 个答案:

See Working Demo