时间戳

首页 > 解决方案 > 隐藏/显示链接点击的 div 不适用于自定义 wordpress 模板文件

javascript - 隐藏/显示链接点击的 div 不适用于自定义 wordpress 模板文件

问题描述

我试图在链接点击时隐藏/显示 div。但它在我的网站上无法正常工作。我在自定义 WordPress 模板上使用此代码。

以下是我的 HTML

<div class="col-md-4">
        
            <a id="link-edit-form" href="#" >PROFILE INFO</a><br/>
            <a id="link-reset-form" href="#">PASSWORD RESET</a><br/>
            <a id="link-logout-form" href="#">LOG OUT</a>
         
    </div>

<div class="col-md-8">
        <div class="paragraph-styles">
            <div id="edit-form-settings">
                <?php echo do_shortcode( '[wppb-edit-profile form_name="edit-profile"] ');?>
            </div>
            <div id="reset-form-settings">
                <?php echo do_shortcode( '[wppb-edit-profile form_name="password-reset"] ');?>
            </div>
            <div id="logout-form-settings">
                <?php echo do_shortcode( '[logout-btn] ');?>
            </div>
        </div>
    </div>

以下是我的 JS

<script>
    
    jQuery(function() {
        jQuery('#link-edit-form').click(function() {
            jQuery('#reset-form-settings').hide();
            jQuery('#logout-form-settings').hide();
            jQuery('#edit-form-settings').show();
                        return false;
                    });        
                });

    jQuery(function() {
        jQuery('#link-reset-form').click(function() {
            jQuery('#edit-form-settings').hide();
            jQuery('#logout-form-settings').hide();
            jQuery('#reset-form-settings').show();
                        return false;
                    });        
                });     
    
    jQuery(function() {
        jQuery('#link-logout-form').click(function() {
            jQuery('#edit-form-settings').hide();
            jQuery('#reset-form-settings').hide();
            jQuery('#logout-form-settings').show();
                        return false;
                    });        
                });                       

</script>

我的控制台向我显示 0 个错误并努力寻找问题所在

标签： javascriptphphtmlwordpresstwitter-bootstrap

解决方案

您是否尝试阻止默认事件？

对于每个点击功能：

jQuery('#link-edit-form').click(function( event ) {
    event.preventDefault();

推荐阅读