单击链接时使用jQuery更改DIV内容 [英] Change DIV contents using jQuery when link clicked

查看:83
本文介绍了单击链接时使用jQuery更改DIV内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在此先感谢您回答=)
当我单击具有相应类的链接时,我正在尝试在div之间切换(如下面的代码所示). 它适用于第一个链接,但不适用于其他链接. 我在做什么错,我还可以使用其他功能"做什么?

Thank you, in advance, for those who answer =)
I'm trying to switch between divs when i click the links with the respective class (as follow on the code bellow). It works for the first link, but not for the others. What am I doing wrong, and what other 'function' can i use to do this?

jQuery

$(document).ready(function(){
$(".content").hide();

$("#cont").click(function() {
if ($(this).hasClass("info")){ $("#info").slideToggle(500); }
if ($(this).hasClass("gallery")){ $("#gallery").slideToggle(500); }
if ($(this).hasClass("projects")){ $("#projects").slideToggle(500); }
if ($(this).hasClass("contacts")){ $("#contacts").slideToggle(500); }
    // $(".content").slideToggle(500);
});

});

HTML

<?php $type = $_GET['o']; ?>

<div class="sidebar1">
    <ul class="nav">
      <li><a id="cont" class="info" href="#">Info</a></li>
      <li><a id="cont" class="gallery" href="#">Gallery</a></li>
      //<li><a id="cont" class="projects" href="index.php?o=projects">Projects</a></li>
      <li><a id="cont" class="contacts"  href="#">Contacts</a></li>
    </ul>
</div>
  <div class="content" id="info">
    <h1>Info</h1>
    <p>Info content ...</p>
</div>
<div class="content" id="gallery">
    <h1>Gallery</h1>
    <p>Gallerycontent ...</p>
</div> <!-- it's the same for the other links -->

稍后再说.. 如何通过使用链接说出要包括的"$ type"(仅使用一个"content" div)来执行与此类似的操作?
以项目"链接为例.

On a later note.. How can I do something similar to this, using the links to say what '$type' to include, using only one 'content' div?
'Projects' link is commented as example.

<div class="content">
    <?php include($type . ".txt"); ?>
</div>

推荐答案

HTML代码中的类应与JQuery代码中的类相同:

The classes in your HTML code should be the same as those in JQuery code :

gallery != galerias,

这篇关于单击链接时使用jQuery更改DIV内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆