0

我有一组 DIV

一个 DIV 最初设置为没有 .hidden 属性，所有其他 DIV 都具有它。

我有一组 HREF 的调用 DIV 将使其显示。

我有一个“隐藏显示：无”的 CSS；和“显示显示：块；”

我希望能够循环遍历所有 div，删除所选 div 的 .hidden 属性并放置 OLD div 的 .hidden 属性...

简单吧？我对JQ的了解是有限的，并且在路上颠簸......就像现在一样。

这是代码：

<section id='content'>
  <div id='stuff1' class='somestuff hidden'>
      <p>Hello World 1</p>
  </div>
  <div id='stuff2' class='somestuff'>
      <p>Hello World 2</p>
  </div>
  <div id='stuff3' class='somestuff hidden'>
      <p>Hello World 3</p>
  </div>
  <div id='stuff4' class='somestuff hidden'>
      <p>Hello World 4</p>
  </div>
  <div id='stuff5' class='somestuff hidden'>
      <p>Hello World 5</p>
  </div>
</section>

这是资产净值：

<div id='nav'>
   <a href='#' onclick='changePage(this.id)' id='stuff1'>Click for Content 1</a>
   <a href='#' onclick='changePage(this.id)' id='stuff2'>Click for Content 2</a>
   <a href='#' onclick='changePage(this.id)' id='stuff3'>Click for Content 3</a>
   <a href='#' onclick='changePage(this.id)' id='stuff4'>Click for Content 4</a>
   <a href='#' onclick='changePage(this.id)' id='stuff5'>Click for Content 5</a>    
</div>

最后我相信的是功能：

<script>

        function changePage(currPage)
        {

            $(document).ready(function() {
                $('#' + currPage + 'Page .contentBody').each(function(i, j) {
                    console.log(i); //the i
                    console.log(j); //the div

                    $('#' + currPage + 'Page' + "Page").removeClass('hiddenstuff');
                    $('#' + currPage + 'Page' + "Page").addClass('hiddenstuff');

                });
            });

        }       


</script>

是的，我知道这个功能无处不在，但本质上，我怎么知道用户会点击什么以及他们什么时候点击，他们刚刚离开了哪一个，他们要去哪一个？？？嗯？

谢谢

4

2 回答 2

0

首先，您不需要 document.ready 在函数内.. 其次id 应该始终是唯一的.. 具有相同 id 的多个元素是无效的。

尝试这个

将您的<a>id 更改为data-id（使用 HTML5 数据属性）。这应该使所有 id 都是唯一的。

 <a href='#' onclick='changePage(this)' data-id='stuff1'>Click for Content 1</a>

和 javascript (jquery)

function changePage(currObj)
{
   $('.somestuff').addClass('hidden'); 
   $('#' + $(currObj).data('id')).removeClass('hidden');

}

考虑somestuff类存在于所有 div 中。如果不向所有 div 添加公共类并使用类选择器..

于 2013-10-21T17:44:26.907 回答
0

通常这种工作是通过使用锚标记的 href 来完成的，这样它就可以在非 JavaScript 环境中优雅地降级。

其次，与其传递锚标记的id，为什么不传递href，因为它现在在href中？或者，当我们这样做的时候，完全通过this。此外，您需要从 changePage 返回响应，以便我们可以防止页面跳转。

<a href='#stuff1' onclick='return changePage(this)'>Click for Content 1</a>
<a href='#stuff2' onclick='return changePage(this)'>Click for Content 2</a>
<a href='#stuff3' onclick='return changePage(this)'>Click for Content 3</a>

现在，我们可以从内容 div id 中删除“Page”。

<section id='content'>
  <div id='stuff1' class='somestuff hidden'>
      <p>Hello World 1</p>
  </div>
  <div id='stuff2' class='somestuff'>
      <p>Hello World 2</p>
  </div>
  <div id='stuff3' class='somestuff hidden'>
      <p>Hello World 3</p>
  </div>
  <div id='stuff4' class='somestuff hidden'>
      <p>Hello World 4</p>
  </div>
  <div id='stuff5' class='somestuff hidden'>
      <p>Hello World 5</p>
  </div>
</section>

有了所有这些，这就是 javascript 的外观：

function changePage(el) {
    var target = $(el).attr("href"); // using jQuery to avoid an IE inconsistency
    $(target).show().siblings().hide();
    // prevent page jump
    return false;
}

简单吧？好吧，它可以更简单。

<a href='#stuff1' class="changepage">Click for Content 1</a>
<a href='#stuff2' class="changepage">Click for Content 2</a>
<a href='#stuff3' class="changepage">Click for Content 3</a>

和js：

$(document).ready(function(){
    $(".changepage").click(function(){
        var target = $(this).attr("href"); // using jQuery to avoid an IE inconsistency
        $(target).show().siblings().hide();
        // prevent page jump
        return false;
    });
});

为了使这个降级，如开头所述，添加一个无脚本标签，其中包含一个显示 .hidden div 的内联样式。

于 2013-10-21T17:54:06.760 回答