javascript - 如何在php中显示或隐藏标题-6ren

javascript - 如何在php中显示或隐藏标题

转载作者：行者123 更新时间：2023-11-28 02:59:31

您好，我需要在单击添加按钮后隐藏文本，并且应该显示表单。这是我的代码。

<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
    <div class="last" style="width: 710px;">
        <p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
    </div>
</div>

//Here is add button and go back button if i click in this add button form should be displayed else t should show the same text.//

<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;">
    <a class="large awesome oranges"  >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;">
    <a class="large awesome orange"  href="property.php">Go Back </a>
</div>

<p>You haven't added any Co-owners Yet.</p>

//My form starts from here//

<h2>Owner Property details</h2>
<input  type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text"    name="name_coowner"  /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text"   name="pan_coowner"  /></p>

如果我打开页面我得到这个表格，但是在这个所有者属性的详细信息应该只在我点击添加属性所有者时显示。剩下的所有其他应该是隐藏的它应该只显示形式就是这样。

最佳答案

将您的代码替换为:
注意:这需要有效的互联网连接才能通过互联网获取 JQuery 库

    <html>
    <head>
        <title>Title of website</title>
        <style>
            .hidden
            {
                display:none;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        </script>
        <script>
            $(document).ready(function () {
                $('.add-property').click(function () {
                    $('.hidden').toggle('slow');
                    $('#add-owner-div').addClass('hidden');
                    $('#go-back-div').addClass('hidden'); 
                });
            });
        </script>
    </head>
    <h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
    <div class="last" style="margin-right: 0; padding-right: 0;">
        <div class="last" style="width: 710px;">
            <p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
        </div>
    </div>
    <div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;" id="add-owner-div">
        <a class="large awesome oranges add-property"  >Add a property Co-owner</a>
    </div>
    <div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;" id="go-back-div">
        <a class="large awesome orange"  href="property.php">Go Back </a>
    </div>
    <p>You haven't added any Co-owners Yet.</p>
    <h2>Owner Property details</h2>
    <div class="hidden" style="display:none">
        <form>
            <input type='hidden' value="<?php echo $username; ?>" name='email'>
            <p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text"    name="name_coowner"  /></p>
            <p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text"   name="pan_coowner"  /></p>  
        </form>
    </div>
</html>