Question

我有两个按钮都有隐藏元素。

这是HTML的基础知识：

<button class="read">
<table class="displayReviews">
<button class="write">
<form class="writeForm">

表格和表格中有js到toggle。

这是js。

$('.read').click(function() {
    $('.displayReviews').toggle(),
    $('.displayReviews').css("position", "relative"),
    $('.writeForm').css("visibility","hidden");
});

$(document).ready(function() {
    $('.write').click(function() {
        $('.writeForm').toggle(),
        $('.writeForm').css("visibility","visible"),
        $('.writeForm').slideToggle("slow") ,
        $('.displayReviews').css("position", "absolute"),
        $('.displayReviews').css("top", "1000px");
    return false;
    });
});

我知道这是一个巨大的混乱。如果有人能指出我正确的方向，那就非常感激了。

我希望它在单击写入按钮时显示表单，在单击读取按钮时显示表格。

Answer 1

在这里，我做的是，

我创建了一个表单，一个表和两个按钮。
然后我为表单和表格添加了css display:none;。
点击相应按钮后，将通过将其css显示属性更改为block

JS代码：

$('.read').click(function() {
    $(".displayReviews").css("display","block");
    $(".writeForm").css("display","none");
});

$('.write').click(function() {
    $(".writeForm").css("display","block");
    $(".displayReviews").css("display","none");
});

CSS代码：

.displayReviews{
    display:none;
}
.writeForm{
    display:none;
}

HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="read">Read</button>
<table class="displayReviews">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table><br/>
<button class="write">Write</button>
<form class="writeForm">
    <label for="name">Name</label>
    <input type="text" id='name'/>
</form>

希望它可以帮助你：）

Answer 2

这是你需要的小提琴。

http://jsfiddle.net/swaprks/aL0djmju/

<button class="read">Read</button>
<table class="displayReviews"><tr><td>Table displayed</td><tr></table>
<button class="write">Write</button>
<form class="writeForm">Form displayed</form>

.displayReviews, .writeForm{ display: none;}

$(function(){
    $(".read").click(function(){
        $(".displayReviews").toggle();
        $(".writeForm").hide();
    });

    $(".write").click(function(){
        $(".writeForm").toggle();
        $(".displayReviews").hide();
    });
});

Answer 3

$('.read').click(function() {
  $('.displayReviews').toggle("slow");
  $('form.writeForm').hide("slow");
});


$('.write').click(function() {
  $('form.writeForm').toggle("slow");
  $('.displayReviews').hide("slow");

});

试试这种方式 fiddle

Answer 4

html：

git am

在加载时将<button class="read" >read</button> <table class="displayReviews" style="display:none;"><tr><td>table test</td></tr></table> <button class="write">write</button> <form class="writeForm" style="display:none;"><label> form toggle</label></form>设置为display并使用jquery

切换它

none

我如何清除jquery点击功能

4 个答案: