Question

我的test.php页面在

下面

<!DOCTYPE html>
    <html lang="en">
    <head>
    </head>
    <body>
    <a href="#" id="hideshowone">Hide</a>
    <div id="hideshowotherone" style="padding:20px; margin:20px; border:2px solid black; width:400px; color:green;" >However, as a practical matter, you will be somewhat more limited if you want your documents to work with a variety of browsers, CSS editors, and JavaScript frameworks.
    As noted in other responses, jQuery has problems with ids that contain periods and colons.</div>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    </body>
    </html>

我正在使用Jquery版本：/ *！ jQuery v1.11.2 | （c）2005年，2014年jQuery Foundation，Inc。| jquery.org/license * / 我的main.js页面如下：

$('#hideshowone').toggle(function(){
$('#hideshowone').text('Show');
$('#hideshowotherone').hide();
},function(){
$('#hideshowone').text('Hide');
$('#hideshowotherone').show();
});

我想用一个链接操作隐藏和显示功能，即当我按下隐藏时段落应隐藏，链接文本应显示为显示，当我按链接显示时，应显示段落，链接文本应更改为隐藏，请帮助，因为此代码不起作用，因为段落出现但链接在页面加载时立即消失，请帮助：

Answer 1

这对我来说很好。试一试

<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
</head>
<body>
  <a href="#" id="hideshowone">Hide</a>
  <div id="hideshowotherone" style="padding:20px; margin:20px; border:2px solid black; width:400px; color:green;" >However, as a practical matter, you will be somewhat more limited if you want your documents to work with a variety of browsers, CSS editors, and JavaScript frameworks.
    As noted in other responses, jQuery has problems with ids that contain periods and colons.</div>


    <script>

      $("#hideshowone").click(function(){

      if($(this).text() == 'Show'){
        $(this).text('Hide');
        $("#hideshowotherone").toggle();
      } else {
        $(this).text('Show');
        $("#hideshowotherone").toggle();
      }
    });

    </script>

  </body>
  </html>

如果您有任何疑问，请与我们联系

Answer 2

$('#hideshowone').click(function(){
  $('#hideshowotherone').toggle();
});

Answer 3

这个怎么样：

$(document).ready(function () {
    $('#hideshowone').click(function () {
        if ($('#hideshowotherone').is(':visible')) {
            $('#hideshowone').text('Show');
            $('#hideshowotherone').fadeOut();
        } else {
            $('#hideshowone').text('Hide');
            $('#hideshowotherone').fadeIn();
        }
    });
});

jsfiddle with jQuery 1.11.0

Answer 4

我认为这会对你有所帮助。查看fiddle。

$(document).ready(function(){
    $('#hideshowone').click(function(){
$('#hideshowotherone').toggle();
        if($(this).text() == "Hide"){
$('#hideshowone').text('Show');
        }else
$('#hideshowone').text('Hide');            
        });

});

隐藏show函数在Jquery中不起作用

4 个答案: