个人中心
gpt4 book ai didi

javascript - 启用和禁用 div 可见性的问题

转载 作者：行者123 更新时间：2023-11-28 08:36:18 25 4
gpt4 key购买 nike

我想创建一个类似的窗口，其中包含如下图所示的表单。

Objective

在我的例子中，当点击顶部导航栏上的登录链接时，包含表单的屏幕被调用。

我的方法是使用包含表单及其元素的隐藏 div，同时调用函数来启用和禁用 div 的可见性。

目前我正在将 div 样式设置为隐藏，如 public.css 中的 log_in_form_div 类所示。

下面是我的 HTML 代码:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <title>Swim-mates - Sign Up or Log In</title>

   <!-- Generic CSS -->
   <link href="stylesheets/public.css" rel="stylesheet">

   <!-- Social networking log in button CSS -->
   <link href="stylesheets/auth-buttons.css" rel="stylesheet">

   <link href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css" rel="stylesheet" >

   <!-- Bootstrap Core CSS -->
   <link href="stylesheets/bootstrap.min.css" rel="stylesheet">

   <!-- Custom CSS -->
   <link href="stylesheets/modern-business.css" rel="stylesheet">

   <!-- Custom Fonts -->
   <link href="font-awesome-4.1.0/stylesheets/font-awesome.min.css" rel="stylesheet">

   <!-- HTML5 Reset Stylesheet
   <link href="stylesheets/html5reset-1.6.1.css" rel="stylesheet"> -->

   <!-- Normalize CSS
   <link rel="stylesheet" href="stylesheets/normalize.css" />  -->    

</head>

<body>
    <nav id="topbar"> 
        <a id="logo_link" href="">ABCD corp</a>

        <ul>
            <li><a href='#' onclick="javascript:btnLogInForm();">LOG IN</a></li>
            <li><a href='#'>HOW IT WORKS</a></li>
            <li><a href='#'>FEATURES</a></li>
            <li><a href='#'>abcd.com</a></li>
        </ul>
    </nav>

    <!-- Welcome message -->
    <section class="welcome_message">Welcome message ... Welcome message ... Welcome message ... Welcome message ... Welcome message ... </section>

    <!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('images/1900x1080imgtest1.jpg');"></div>

                <div class="carousel-caption">
                     Caption A
                </div>
            </div>

            <div class="item">
                <div class="fill" style="background-image:url('images/1900x1080imgtest2.jpg');"></div>

                <div class="carousel-caption">
                     Caption B
                </div>
            </div>

            <div class="item">
                <div class="fill" style="background-image:url('images/1900x1080imgtest3.jpg');"></div>

                <div class="carousel-caption">
                     Caption C
                </div>
            </div>
        </div>    
    </header>

    <!-- Page Content -->
    <section id="page_content" class="page_content_div">

        <div class="page_content_main_div">

            <div class="log_in_heading_div" >
                <p> Log in with: </p>
            </div>

            <div class="log_in_div">
                <a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
            </div>

            <div class="log_in_div">
                <a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
            </div>

            <div class="btn_log_in_with_email_div">
                <a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>Our details</b></a>
            </div>

            <hr class="hr"></hr>

            <form action="#" method="GET" class="sign_up_form">
                <div class="sign_up_heading_div">
                    <p>Sign up:</p>
                </div>                

                <div>
                    <input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
                </div>

                <div>
                    <input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
                </div>

                <div>
                    <input title="Enter an email" class="email" name="password" type="text" required placeholder="Enter email">
                </div>

                <div>
                    <input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
                </div>                

                <div>
                    <input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
                </div>

                <div class="form_button_internal_div">
                    <button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
                </div>

                <div class="form_terms_of_service_internal_div">
                    <p class="terms_of_service">By signing up, I agree to the ABCD <a href='#' id="generic_link_decoration"><b>Terms of Service</b></a> and <a href='#' id="generic_link_decoration"><b>Privacy Policy</b></a>.</p>
                </div>                                
            </form>

        </div>
    </section>      

    <div class="log_in_form_div" id="log_in_form_div">
        <form class="log_in_form" action="#">
            <ol>
                <li class="group">
                    <label for="namefield">Username</label>
                    <input type="text" name="name" id="namefield" />
                </li>
                <li class="group">
                    <label for="passwordfield">Password</label>
                    <input type="text" name="password" id="passwordfield" />
                </li>
                <li class="group">
                    <div class="grouplabel">Sign up for</div>
                    <ol>
                        <li>
                            <input type="radio" name="membershiptype" value="beginner" id="beginnerbtn" />
                            <label for="beginnerbtn">Beginner</label>
                        </li>
                        <li>
                            <input type="radio" name="membershiptype" value="question" id="question" />
                            <label for="question">Pro</label>
                        </li>
                    </ol>
                </li>
            </ol>

            <button type="submit" class="btn_sign_up" id="btn_cancel_log_in_form" onclick="btnCancelLogInForm()">Cancel</button>

            <button type="submit" class="btn_sign_up" id="btn_send_log_in_form" onclick="btnCancelLogInForm()">Send</button>            
        </form>
    </div>

    <section>
        <footer class="footer_div"> 
            <ul>
                <li><a href='#'>ABOUT</a></li>
                <li><a href='#'>TERMS OF SERVICE</a></li>
                <li><a href='#'>FEATURES</a></li>
                <li><a href='#'>HELP</a></li>
            </ul>     
        </footer>    
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel i.e. directly related to carousel class name -->
    <script>
        $('.carousel').carousel( {
            interval: 3500 //changes the speed
        })

        function btnLogInForm() {
        document.getElementById("log_in_form_div").style.visibility="visible"; 
        }

        function btnCancelLogInForm() {
            document.getElementById("log_in_form_div").style.visibility = "hidden";
        }        
    </script>     

</body>

</html>

下面是我的 CSS 代码:

enter code here      padding: 0;
    margin: 0;
}
/* Insert a gap after every <ul> element */
.footer_div ul:after {
    content:" ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* ul li a */
.footer_div ul li a {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    color: #F5F5F5;
    text-decoration: none;
    display: block;
    padding: 15px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 19px;
    position: relative;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
    -ms-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s;
}

/* ul li a:hover */
.footer_div ul li a:hover {
    color: #000000;
}

/* Bullet point after the menu name 
.footer_div ul li a:after {
    content:"";
    display: block;
    position: absolute;
    right: -3px;
    top: 19px;
    height: 6px;
    width: 6px;
    background: #F5F5F5;
    opacity: .5;
} */

/* Insert content before every <a> element's content */
.footer_div ul li a:before {
    content:"";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #00FF00;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
}

/* */
.footer_div ul li.last > a:after,.footer_div ul li:last-child > a:after {
    display: none;
}

/* */
.footer_div ul li.active a {
    color: #999999;
}

/* */
.footer_div ul li.active a:before {
    width: 100%;
}

/* */
.footer_div.align-right li.last > a:after,.footer_div.align-right li:last-child > a:after {
    display: block;
}

/* */
.footer_div.align-right li:first-child a:after {
    display: none;
}

我的问题是:

  1. 我采用的方法是最好的吗？

  2. 我似乎在尝试启用和禁用 div 的代码的 javascript 位中出错？

谢谢

最佳答案

对于您的导航菜单，您可以像这样使用 jquery。你只需要用这个改变导航标签

<nav id="topbar"> 
        <a id="logo_link" href="">ABCD corp</a>

        <ul>
            <li><a href='#' id="login">LOG IN</a></li>
            <li><a href='#'>HOW IT WORKS</a></li>
            <li><a href='#'>FEATURES</a></li>
            <li><a href='#'>abcd.com</a></li>
        </ul>
    </nav>

在你的脚本标签中添加这个。

<script>
$(document).ready(function(){
   $('#login').click(function(){
     $('#log_in_form_div').show();
   });
   $('#btn_cancel_log_in_form').click(function(){
    $('#log_in_form_div').hide();
   });
   $('.carousel').carousel( {
            interval: 3500 //changes the speed
        });
)};




    </script>

关于javascript - 启用和禁用 div 可见性的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28022743/

25 4 0
文章推荐： css - UI 网格 CSS 不工作
文章推荐： ios - 快速缓存.. iOS FBApi
文章推荐： jquery 旋转最大计数
文章推荐： javascript - CKeditor contenteditable preg_match
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com