使用jquery显示不同页面中的元素

本文关键字：元素 jquery 显示 使用 | 更新日期: 2023-09-27 18:01:00

我有两页。

  1. 母版页
  2. 默认页(从母版页继承(

我在主页上有一个菜单&我需要点击一些菜单项&当它被点击时，我需要一些元素(span(在默认页面中可见。

下面的代码中没有错误，但没有出现预期的结果。

MasterPage:

 <li id="lgbtn" style="float:right"><a href="#">Login</a></li>
 <script>
        $('#lgbtn').live('click', function (e) {
            $('span4').show();//<-- this span is in Default page
        });
    </script>

Default.aspx:

<div class="span4" style="visibility:hidden">
   <form  name="form-area"  class="form-area" runat="server">
     //Some content here
   </form>
</div>

使用jquery显示不同页面中的元素

在JQuery中，如果你想获得基于类的元素，那么你必须编写如下的语法

$('.ClassName'(

并获得基于元素的id，然后

$('#ControlId'(

Jquery的.show与display:block相同；

为了解决这个问题，你可以使用进行更改

$('.span4').css("visibility" , "visible");

或者您可以将html更改为如下：

<div class="span4" style="display: none;">
   <form  name="form-area"  class="form-area" runat="server">
     //Some content here
   </form>
</div>

1(您错过了类的dot

2( 你的visiblity样式，所以在这种情况下显示不起作用，所以请使用css样式visibility visible

$('.span4').css("visibility" , "visible");

试试这个

  $('#lgbtn').live('click', function (e) {
       if($('.span4').is(":visible")){
       $('.span4').css("visibility" , "hidden");
       }
       else{
        $('.span4').css("visibility" , "visible");
       } 
    });

另一种方式

 <div class="span4" style="display:none">
    $('#lgbtn').live('click', function (e) {
           if($('.span4').is(":visible")){
           $('.span4').show();
           }
           else{
            $('.span4').hide();
           } 
        });

最简单的方法也可以在html 中更改

 <div class="span4" style="display:none">
  $('#lgbtn').live('click', function (e) {
           $('.span4').toggle();
        });

首先你知道css 中的可视性和显示之间的区别

可见性：hidden隐藏元素，但仍占用中的空间布局。

display:none从文档中完全删除元素。它不会占用任何空间，即使它的HTML仍在源代码。

您可以在此页面上看到这些样式属性的效果。我创建了三个相同的代码样例，然后设置显示和可见性属性，这样您就可以看到它们的外观。

尝试使用该代码：

$('#lgbtn').live('click', function (e) {
        $('.span4').show();//<-- this span is in Default page
    });

使用

像

<script>
        $('#lgbtn').live('click', function (e) {
           $('.span4').css("visibility" , "visible");
        });
    </script>

演示

使用toggle((更新演示

对于toggle((，请使用

切换

html

<li id="lgbtn"  style=""><a href="#">Login</a></li>
<div class="span4" style="display:none">asds</div>

JS

$( document ).ready(function() {
$( "#lgbtn" ).click(function() {
        alert("clicked");
           $('.span4').toggle();
        });
    });
相关文章：