Javascript 基于截面的信息隐藏与显示

我的设想如下。我有7个标签（每天一个）使用引导。我想在pageload上加载所有7天的信息

<ul class='nav nav-tbs'>
  <li><a id='monday'>Monday</a></li>
  <li><a id='tuesday'>Tuesday</a></li>
  <li><a id='wednesday'>Wednesday</a></li>
  <li><a id='thursday'>Thursday</a></li>
  <li><a id='friday'>Friday</a></li>
  <li><a id='saturday'>Saturday</a></li>
  <li><a id='sunday'>Sunday</a></li>
</ul>

星期一
星期二
星期三
星期四
星期五
星期六
星期天

理想情况下，单击“天数”选项卡时，您只会显示“天数”信息。每个“每日页面”都相当复杂

<div class='row'>
  <div class='span12'>
    <legend>Breakfast</legend>
  </div>
</div>

<div class='row'>
  <div class='span5 bfood'>
    <h3>{{ bname }}</h3>
    <img src='{{bimg }}'>
    <ul>
      {% for ing in bing %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Breakfast Food:</h3>
        <input type='text' value='{{ bfood }}' id='bfood'>
        </p>
        <p>
        <h3>Breakfast Required:</h3>
        {% for breq in br %}
        <div class='input-append'>
          <input type='text' name='br' value='{{ breq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='br'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Breakfast Forbidden:</h3>
        {% for bfor in bf %}
        {% if bfor != '' %}
        <div class='input-append'>
          <input type='text' name='bf' value='{{ bfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='bf'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='b'>Try again</button>
        <div id='result'></div>
      </form>
    </div>
  </div>
</div>
<div class='row'>
  <div class='span12'>
    <legend>Lunch</legend>
  </div>
</div>
<div class='row'>
  <div class='span5 lfood'>
    <h3>{{ lname }}</h3>
    <img src='{{ limg }}'>
    <ul>
      {% for ing in ling %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Lunch Food:</h3>
        <input type='text' value='{{ lfood }}' id='lfood'>
        </p>
        <p>
        <h3>Lunch Required:</h3>
        {% for lreq in lr %}
        <div class='input-append'>
          <input type='text' name='lr' value='{{ lreq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='lr'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Lunch Forbidden:</h3>
        {% for lfor in lf %}
        {% if lfor != '' %}
        <div class='input-append'>
          <input type='text' name='lf' value='{{ lfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='lf'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='l'>Try again</button>
      </form>
    </div>
  </div>
</div>
<div class='row'>
  <div class='span12'>
    <legend>Dinner</legend>
  </div>
</div>
<div class='row'>
  <div class='span5 dfood'>
    <h3>{{ dname }}</h3>
    <img src='{{ dimg }}'>
    <ul>
      {% for ing in ding %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Dinner Food:</h3>
        <input type='text' value='{{ dfood }}' id='dfood'>
        </p>
        <p>
        <h3>Dinner Required:</h3>
        {% for dreq in dr %}
        <div class='input-append'>
          <input type='text' name='dr' value='{{ dreq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='dr'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Dinner Forbidden:</h3>
        {% for dfor in df %}
        {% if dfor != '' %}
        <div class='input-append'>
          <input type='text' name='df' value='{{ dfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='df'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='d'>Try again</button>
        <div id='result'></div>
      </form>
    </div>
  </div>
</div>

早餐
{{bname}}

{bing%%中的ing百分比}
{{{}}
{%endfor%}

{{csrf_token}}
听起来不太好？

早餐：


所需早餐：
{br%中的breq为%br}
{%endfor%}


禁止早餐：
{bf%中的bf为%bf}
{%bfor！=''%}
{%endif%}
{%endfor%}

再试一次
午餐
{{lname}}

{%用于在ling%}
{{{}}
{%endfor%}

{{csrf_token}}
听起来不太好？

午餐：


所需午餐：
{%lr%中的lreq为%lreq}
{%endfor%}


禁止午餐：
{lf%中lfor的%
{%if lfor！=''%}
{%endif%}
{%endfor%}

再试一次
晚餐
{{dname}}

{在叮叮中叮叮的百分比为%0}
{{{}}
{%endfor%}

{{csrf_token}}
听起来不太好？

晚餐：


所需晚餐：
{%dr%中的dreq为%dr}
{%endfor%}


禁止用餐：
{df%中的dfor为%df}
{%if-dfor！=''%}
{%endif%}
{%endfor%}

再试一次

---

隐藏/显示上述各项的最佳策略是什么？作为旁注，我还想降低“单个”页面的复杂性，因为它相当长，并且有很多重复内容。

使用jQuery很容易找到页面上的任何元素。

使用jQuery很容易找到页面上的任何元素。

我建议您执行以下操作：

使每个内容的函数重复，这样您就有了一个“更干净”的代码

如果您需要更改其中一个部分中的某些内容，还可以减少工作量

将每天的内容放在一个单独的div中，加载时只显示当天的div或适合您需要的内容

然后，单击切换时，根据需要在div上显示隐藏

---

我建议您执行以下操作：

使每个内容的函数重复，这样您就有了一个“更干净”的代码

如果您需要更改其中一个部分中的某些内容，还可以减少工作量

将每天的内容放在一个单独的div中，加载时只显示当天的div或适合您需要的内容

然后，单击切换时，根据需要在div上显示隐藏

---

将每一组日代码封装在一个元素中，如

<div id="section_monday">
  //all code for monday
</div>

---

将每一组日代码封装在一个元素中，如

<div id="section_monday">
  //all code for monday
</div>

---

我建议您使用

.toggleClass（函数（索引，类，开关）[，开关]）

函数

返回要在匹配集中每个元素的class属性中切换的类名

开关

一个布尔值，用于确定是否应添加或删除类

---

这里是完整的文档

我建议您使用

.toggleClass（函数（索引，类，开关）[，开关]）

函数

返回要在匹配集中每个元素的class属性中切换的类名

开关

一个布尔值，用于确定是否应添加或删除类

这里是完整的文档