Question

我有以下HTML代码

<a href="javascript:">
    <img class="remove" src="images/remove.png" />
</a>
<div class="content">
    <h2>About</h2>
    <p>We are Sydney Wedding Photographers and have ...</p>
</div>

看起来像这样

enter image description here

现在，点击“X”图像后，“内容”div应隐藏并显示。但是'X'图像应该触发这个东西。

Answer 1

试试此代码

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    $('.remover').click(function() {
      $('.content').toggle();
    });
});
</script>
<style>
.remove { cursor: pointer; }
</style>
</head>
<body>
<img class="remove" src="images/remove.png" />
<div class="content">
    <h2>About</h2>
    <p>We are Sydney Wedding Photographers and have ...</p>
</div>
</body>
</html>

Answer 2

您可以使用Jquery toggle（）函数实现此目的。我已经完成了单击按钮，您可以在链接点击事件中编写相同的内容。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <title>Untitled Page</title>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#link").click(function() {
                $('.content').toggle();
                return false;
            });

        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <button id="link"   ></button>


<div class="content">
    <h2>About</h2>
    <p>We are Sydney Wedding Photographers and have ...</p>
</div>
    </div>
    </form>
</body>
</html>

从另一个链接切换Class从一个到另一个

2 个答案: