我在torrent页面上工作,我尝试使用js实现div容器的淡入/淡出样式。但是由于某些原因该代码无法正常工作,并且在控制台中也没有错误日志。
下面是我的代码:

HTML:

<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
      <header class="masthead mb-auto">
        <div class="inner">
          <h3 class="masthead-brand">Torrents.ServerClouD</h3>
          <nav class="nav nav-masthead justify-content-center">
            <a class="nav-link active" id="home" href="index.php">Home</a>
            <a class="nav-link" id="torrents">Completed Torrents</a>
            <a class="nav-link" id="contact">Contact</a>
          </nav>
        </div>
      </header>

      <div class="main" id="home-container">
      <main role="main" class="inner cover">
        <h1 class="cover-heading">Upload your .torrent file</h1>
        <p class="lead">Magnet Link support is currently in development and will be available soon.</p>
        <p class="lead">
       <form name="frm" action="reciever.php" method="post" enctype="multipart/form-data" onsubmit="completeAndRedirect();">
          Filename: <br> <input  id="file" name="file" type="file" accept=".torrent" /> <br><br>
          <input type="submit" name="Upload" value="Submit" />
    </form>
        </p>
      </main>
      </div>

      <div class="main" id="torrents-container" style="display:none">
      <h2>Here is the link for torrents which have downloaded / leeched completely.</h2>
        <input type="submit" value="Click Me!" name="DoneTorrents" onclick="window.open('https://servercd.tk')"  style="height:50px; width:80px" />
      </div>

      <div class="main" id="contact-container" style="display:none">
      <p>Please contact us at blahblahblahblah</p>
      </div>


JS:

 $('#home').click(function(e){
    $('#home-container, #torrents-container, #contact-container').fadeOut('slow', function(){
        $('#home-container').fadeIn('slow');
    });
});

  $('#torrents').click(function(e){
       $('#home-container, #torrents-container, #contact-container').fadeOut('slow', function(){
           $('#torrents-container').fadeIn('slow');
       });
   });

    $('#contact').click(function(e){
         $('#home-container, #torrents-container, #contact-container').fadeOut('slow', function(){
            $('#contact-container').fadeIn('slow');
        });
    });

function completeAndRedirect(){

        var input= document.forms['frm'].file.name;
            if(input==null) {
                alert("please upload first!");
            }else{
               //var t = alert('Please wait while Uploading...');
                $unicode = iconv("utf-8","cp936","name");
                location.href='reviever.php';

                }
            }


我知道肯定有错误,但是找不到。

最佳答案

选择多个ID可以使用,但是fadeOut需要单独应用。

$("#home-container, #torrents-container, #contact-container").each(
  function() {
    $(this).fadeOut('slow')
  })


并且此功能将必须单独实现。

 $('#home-container').fadeIn('slow');


假设您希望它在所有内容消失后消失

$('#contact')。click(function(e){

var items = $("#home-container, #torrents-container, #contact-container");


items.fadeOut(“ slow”)

$('#contact-container').fadeIn('slow');

});

关于javascript - 菜单容器div淡入/淡出不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50635831/

10-12 03:34
查看更多