如何从子页面上的母版页(模板)覆盖html代码

时间:2013-12-02 13:14:19

标签: javascript jquery html css

我有一个带有不可编辑区域div的母版页"菜单栏"因此,当我更改母版页上的条目时,它将在所有子页面上更改。

问题是我上课了#c; curent"这会改变盒子的背景" POLAZNA"但是在子页面上,我需要将其更改为" O NAMA"但因为它是不可编辑的区域我不能。

如何解决我的问题?

<div id="menu-bar">

  <li class="current"><a href="index.html" class="current">POLAZNA</a></li>
  <li><a href="o-nama.html">O NAMA</a>
    <ul>
      <li><a href="o-nama.html">Društvo MS BPŽ</a></li>
      <li><a href="klub-ng.html">Klub Nova Gradiška</a></li>
      <li><a href="dokumenti.html">Dokumenti</a></li>
    </ul>
  </li>
  <li><a href="ms.html">MS</a>
    <ul>
      <li><a href="lijecenje.html">Liječenje</a></li>
      <li><a href="terapija.html">Fizikalna terapija</a></li>
      <li><a href="pomagala.html">Ortopedska pomagala</a></li>
    </ul>
  </li>
  <li><a href="projekti.html">PROJEKTI</a>
    <ul>
      <li><a href="asistenti.html">Osobni asistenti</a></li>
      <li><a href="prevencija.html">Prevencija institucionalizacije</a></li>
      <li><a href="projekt-sb.html">Projekt grada SB</a></li>
      <li><a href="radovi.html">Javni radovi</a></li>
      <li><a href="ostali-projekti.html">Ostali projekti/ programi</a></li>
    </ul>
  </li>
  <li><a href="donatori.html">DONATORI</a>
    <ul>
      <li><a href="mspm.html">MSPM</a></li>
      <li><a href="grad-sb.html">Grad SB</a></li>
      <li><a href="grad-ng.html">Grad NG</a></li>
      <li><a href="bpz.html">BPŽ</a></li>
      <li><a href="hzz.html">HZZ</a></li>
      <li><a href="dm.html">DM</a></li>
    </ul>
  </li>
  <li><a href="forum/index.php">FORUM</a></li>
  <li><a href="kontakt.html">KONTAKT</a></li>
    </div>

1 个答案:

答案 0 :(得分:0)

这是一种使用jQuery可以实现的方法: 重要的是要注意我已经为每个LI添加了类,它们是顺序的,所以从li_a开始,然后li_a的每个孩子都会有一个以a开头的类,所以{{1}然后a_1。 ..下一个a_2将有一个li类,依此类推......

这里有一个小提琴,显示下面的代码:http://jsfiddle.net/Wq6p9/

HTML:

li_b

脚本:

<!--master layout stuff here -->
    <div id="menu-bar">
        <ul>
          <li class="li_a"><a href="#" class="a_1">POLAZNA</a></li>
          <li class="li_b"><a href="o-nama.html" class="b_1">O NAMA</a>
            <ul>
              <li><a href="#" class="b_2">Društvo MS BPŽ</a></li>
              <li><a href="#" class="b_3">Klub Nova Gradiška</a></li>
              <li><a href="#" class="b_4">Dokumenti</a></li>
            </ul>
          </li>
          <li class="li_c"><a href="#" class="c_1">MS</a>
            <ul>
              <li><a href="#" class="c_2">Liječenje</a></li>
              <li><a href="#" class="c_3">Fizikalna terapija</a></li>
              <li><a href="#" class="c_4">Ortopedska pomagala</a></li>
            </ul>
          </li>
            <!-- etc -->
        </ul>
    </div>
    <!-- page here -->

    <!-- this is the hidden to set the menu -->
    <input type="hidden" id="selID" value="c_3" />
    <!-- End of page here -->