Question

我很抱歉这个头衔。我不知道如何为下面的场景编写标题。

以下问题对于专家来说会更容易。请耐心等待我的英语。

我正在创建单页组合。在网站上我有顶级菜单，面包屑，内容和＆amp;页脚。

如果我点击任何菜单或子菜单，相应的div正在正确加载，但我想根据菜单动态更改我的痕迹

以下是顶级菜单的HTML代码

 <div id="eyMenuNav">
  <ul id="navmenu">
    <li class="on">
      <a class='link1' href="#first">Article on Technology</a></li>
    <li>
      <a class="sub" href="#">Success Stories</a>
      <ul>
        <li>
          <a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
        </li>
        <li>
          <a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
        </li>
        <li>
          <a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
        </li>
      </ul>
    </li>
    <li>
      <a class='link5' href="#five">Hexaware Key Contributor</a>
    </li>
  </ul>
</div>

以下是面包屑的HTML代码

<div id="eyBreadCrumb">
  <ul>
    <li>
      <a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
    </li>
  </ul>
  <!-- Clearing Element -->
  <div style="clear:both;"></div>
  <!-- end breadcrumb --> </div>

这里是javascript的代码，我试过它是为了一个菜单点击，但我想要所有。

function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}

请帮助我完成上述情况

注意：我没有使用jquery，只有iam使用javascript。

由于马哈德

Answer 1

在this来电中添加onctext()参数，因此您的菜单项如下：

<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>

然后更改您的onctext功能以从this

中检索文字

function onctext(elm) {
    var text = elm.innerHTML;
    document.getElementById("crumb").innerHTML = text;

    // set active class
    var active = document.getElementsByClassName('active')[0];
    if (active) {
        active.className = active.className.replace(' active', '');
    }
    elm.className += ' active';
}

动态更新breadcrumb＆amp;突出活跃的颜色

1 个答案: