Question

我只有零代价才能编码。我正在尝试建立一个简单的小网站，差不多已经完成，但还有一个小问题需要解决。我知道之前已经问过这个问题，我试图弄清楚如何让环境适合我，但不能。我甚至尝试过轻松的jquery淡入和淡出方法，但无法获得id的正确或其他什么？当点击链接时，我想做的就是在div之间淡入淡出。我在这里试过并审查过很多例子，但仍然无法连接它。

任何帮助都将不胜感激。

我在一个页面上有三个链接，它将三个不同的div加载到一个容器中。一切都在同一页面上，一切都很有效，除了我点击链接时不能让它们淡入淡出。我没有问题加载jquery库并以这种方式做到最好。

<head>

<script type="text/javascript">

function showDiv(idInfo) {
  var sel = document.getElementById('divLinks').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
    sel[i].style.display = 'none';
  }
  document.getElementById('container'+idInfo).style.display = 'block';
}
</script>


<style type="text/css">


#container1, #container2, #container3 {
    display:none;
    overflow:hidden;
    background-color: #E6E1E6

</style>



</head>

<body style="background-color: #E6E1E6">



<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
    <div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
    <a href="#" onclick="showDiv('1');return false" style="margin-right: 10px">The Original Woman</a>
    <a href="#" onclick="showDiv('2');return false" style="margin-right: 10px; margin-left: 10px">CREDIT</a>
    <a href="#" onclick="showDiv('3');return false" style="margin-left: 10px">CONTACT</a>
  </div>
</div>

<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
 <div id="container1" style="position: fixed; width: 100%; height: auto;" >
     <table cellpadding="0" cellspacing="0" style="width: 100%">
         <tr>
             <td style="width: 60%">&nbsp;</td>
             <td class="auto-style1" style="width: 40%">
             <img height="auto" src="asencio%20(7).jpg" width="100%" />&nbsp;</td>
         </tr>
     </table>
    </div>
    <div id="container2" style="position: fixed; width: 100%; height: auto;" >
        <table cellpadding="0" cellspacing="0" style="width: 100%">
            <tr>
                <td style="width: 50%">
                <img height="auto" src="mukai.jpg" width="100%" />&nbsp;</td>
                <td style="width: 50%">&nbsp;</td>
            </tr>
        </table>
    </div>
 <div id="container3" style="position: fixed; width: 100%; height: auto;" >
     <table cellpadding="0" cellspacing="0" style="width: 100%">
         <tr>
             <td style="width: 37%">
             <img height="auto" src="pandora_by_alifann.jpg" width="100%" />&nbsp;</td>
             <td style="width: 62%">&nbsp;</td>
         </tr>
     </table>
    </div>

<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>    

</div>


</body>

</html>

Answer 1

你提到使用jQuery，这是一个基本的想法。代码中的注释应该解释发生了什么。我通过添加一些类和一些数据属性来稍微改变了HTML。

$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
  evt.preventDefault(); //stop click event

  var anchor = $(this); //get the link that was clicked on

  if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
    return;
  }

  anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
  anchor.addClass("active"); //add class to current link and select it

  var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
  var visibleContainer = $(".tab-container:visible");
  var complete = function() { //function to call when fade out is complete
    $(showTab).stop().fadeIn(300);
  };
  if (visibleContainer.length) { //make sure w have something to hide
    $(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
  } else {
    complete(); //if first time, just show it
  }
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.

.tab-container {
  display: none;
  overflow: hidden;
}
#container1 {
  background-color: #E60000;
}
#container2 {
  background-color: #00E100;
}
#container3 {
  background-color: #0000E6;
}
a.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
  <div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
    <a href="#" style="margin-right: 10px" data-tab="#container1">The Original Woman</a>
    <a href="#" style="margin-right: 10px; margin-left: 10px" data-tab="#container2">CREDIT</a>
    <a href="#" style="margin-left: 10px" data-tab="#container3">CONTACT</a>
  </div>
</div>

<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
  <div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
    <table cellpadding="0" cellspacing="0" style="width: 100%">
      <tr>
        <td style="width: 60%">&nbsp;</td>
        <td class="auto-style1" style="width: 40%">
          <img height="auto" src="asencio%20(7).jpg" width="100%" />&nbsp;</td>
      </tr>
    </table>
  </div>
  <div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
    <table cellpadding="0" cellspacing="0" style="width: 100%">
      <tr>
        <td style="width: 50%">
          <img height="auto" src="mukai.jpg" width="100%" />&nbsp;</td>
        <td style="width: 50%">&nbsp;</td>
      </tr>
    </table>
  </div>
  <div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
    <table cellpadding="0" cellspacing="0" style="width: 100%">
      <tr>
        <td style="width: 37%">
          <img height="auto" src="pandora_by_alifann.jpg" width="100%" />&nbsp;</td>
        <td style="width: 62%">&nbsp;</td>
      </tr>
    </table>
  </div>

Answer 2

以下是一些快速完成淡入淡出的脚本，但我建议你使用jQuery，因为它是跨浏览器的。

只需更新您的脚本块，它就能运行，无需更改任何其他代码

Vanilla JS

<script type="text/javascript">

function showDiv(idInfo) {
  var sel = document.getElementById('divLinks').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
    sel[i].style.display = 'none';
  }
  fadeIn(document.getElementById('container'+idInfo), 20);
}

function fadeIn(element, duration) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
        //alert("here");
    }, duration);
}

</script>

使用jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<script type="text/javascript">

function showDiv(idInfo) {
  $('#divLinks div').hide(200, function(){
      //Show the clicked 
      $('#container'+idInf).fadeIn(200);
  });
}

</script>

Answer 3

这是一个使用jQuery的简单示例 - 不确定你的最终产品是什么意思，但这应该让你站稳脚跟。

以下是JS的示例片段：

$(document).ready(function(){           //Wait for DOM to finish loading
  $('.navigation a').click(function(){  //When the a link is clicked
    var id = $(this).attr('href');      //grab its href as the ID of the target object
    $('.hidden-content').fadeOut(500);  //Fade out all the divs that are showing
    $(id).fadeIn(500);                  //Fade in the target div

    return false;                       //Prevent the default action of the a link
  });
});

在这里查看jsFiddle：http://jsfiddle.net/pavkr/7vc2jj5j/

在div之间淡入淡出

3 个答案: