Question

我使用下面的代码将类.active添加到站点链接但我需要在单击菜单项或其中一个子项时在导航菜单上添加活动类。例如，如果我单击“admitere”选项卡或其中一个孩子，则必须保持选中“admitere”选项卡，直到我选择另一个选项卡。

我想创建一个菜单和相关子菜单的所有id的数组，包含子菜单让我们说在span标签内，所以当选择一个子菜单时，检查它是否与url相关，如果在里面，则创建第一个菜单相对选项卡选择。现在该网站根据Dreamweaver模板制作的类别高亮显示第一个菜单选项卡，但我需要从模板系统中执行单个动态菜单。

请帮我看看解决问题的正确方法。提前谢谢。

这是 http://www.univagora.ro 网站。

    <script type="text/javascript">
    //<![CDATA[
   function setActive() {
   aObj = document.getElementById('content2-colsx').getElementsByTagName('a');
   for(i=0;i<aObj.length;i++) {
   if(document.location.href.indexOf(aObj[i].href)>=0) {
   aObj[i].className='active';
     }
    }
   }
   //]]>
   </script>
   <script type="text/javascript">
   //<![CDATA[
   window.onload = setActive;
   //]]>
   </script> 


       <div id="menu">
            <ul id="nav">
              <li id="menu_home"><a href="../index.html">home</a></li>
              <li><img src="../images/dropdown/nav_divider.gif" alt=""></li>
              <li id="menu_admitere"><a href="../admitere/admitere.php?expandable=0">ADMITERE</a>
                <div class="nav-active"></div>
                <ul>
                  <li><a href="../admitere/acte.html?expandable=0">Acte necesare</a>
                        <ul>
                            <li><a href="#">test third level</a></li>
                            <li><a href="#">test third level</a></li>
                            <li><a href="#">test third level</a></li>
                        </ul>
                  </li>
                  <li><a href="../admitere/cifre.html?expandable=0">Cifre de scolarizare</a></li>
                  <li><a href="../admitere/desfasurare.html?expandable=0">Desfasurarea admiterii</a></li>
                  <li><a href="../admitere/fisa-inscriere.html?expandable=0">Fisa de &icirc;nscriere candidat</a></li>
                  <li><a href="../admitere/acreditare.html?expandable=0">Acreditare</a></li>
                  <li><a href="../mesajul.html?expandable=0"><em><strong>&#8220; Mesajul Rectorului &#8222;</strong></em></a></li>
                </ul>
              </li>
              <li><img src="../images/dropdown/nav_divider.gif" alt=""></li>
              <li id="menu_programe"><a href="../programe-studii/index.html?expandable=1">PROGRAME DE STUDII</a>
                <div class="nav-active"></div>
                <ul>
                  <li><a href="../programe-studii/drept/index.html?expandable=1&amp;subexpandable=0">Drept</a></li>
                  <li><a href="../programe-studii/politie/index.html?expandable=1">Politie Locala</a></li>
                  <li><a href="../programe-studii/management/index.html?expandable=1&amp;subexpandable=1">Management</a></li>
                  <li><a href="../programe-studii/cig/index.html?expandable=1&amp;subexpandable=2">Contabilitate si Informatica de Gestiune</a></li>
                  <li><a href="../programe-studii/inf-econ/index.html?expandable=1&amp;subexpandable=3">Informatica Economica</a></li>
                  <li><span style="font-size:14px;"><a href="../master/mba-sua.html?expandable=1&amp;subexpandable=4"><em><strong>&#8220;&nbsp;Master MBA AGORA&nbsp;&#8222;</strong></em></a></span></li>
                </ul>
              </li>
              <li><img src="../images/dropdown/nav_divider.gif" alt=""></li>

这里我们是我的朋友，现在我可以拥有我需要的所有活动元素，并且还选择了第一个选项卡来记住我正在访问的菜单类别或子菜单。当然，使用jquery可以缩短代码。这是一份工作解决方案草案。请发布改进。谢谢

目前问题是在首次访问网页时激活index.html，它只在选择元素后才有效。

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script type="text/javascript">

         function setActive() {
         aObj = document.getElementById('menu').getElementsByTagName('a');
         for(i=0;i<aObj.length;i++) {
         if(document.location.href.indexOf(aObj[i].href)>=0) {
         aObj[i].className='active';
     $(aObj[i]).closest('li.top-level').addClass('activetab');
           }
         }
        aObj2 = document.getElementById('nav').getElementsByTagName('a');
        for(i=0;i<aObj2.length;i++) {
        if(document.location.href.indexOf(aObj2[i].href)>=0) {
        aObj2[i].className='active';
           }
          }
         }

        $(document).ready(function(){
    setActive();
        });

     </script>
    <head>

       <body>

        <div id="menu">
    <ul>
        <li class="top-level"><a href="../index.html" >Home</a></li>
        <li class="top-level"><a href="../product.html" id="current">Products</a>
            <ul>
            <li><a href="../sub1.html">item1</a></li>
                <li><a href="../sub11.html">item2</a></li>
                <li><a href="../sub12.html">item3</a></li>
           </ul>
      </li>
        <li class="top-level"><a href="../other.html">Other</a>
          <ul>
            <li><a href="../sub2.html">itemA</a></li>
            <li><a href="../sub21.html">itemB</a></li>
            <li><a href="../sub22.html">itemC</a></li>
            </ul>
      </li>
        <li class="top-level"><a href="../contact.html">Contact</a></li>
    </ul>
  </div>

      <div class="sidebar1">
      <ul id="nav">
      <li><a href="../index.html">index</a></li>
      <li><a href="../product.html">product</a></li>
      <li><a href="../contact.html">contact</a></li>
      </ul>
      </div>

    <body>

和css

    #menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS";
font-size:14px;
font-weight:bold;
}
    #menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#menu li{
    background:#333333 url("images/seperator.gif") bottom right no-repeat;
    float:left;
    padding:0px;
    }
#menu li a{
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
#menu li a:hover, #menu ul li:hover a{
        background: #2580a2 url("images/hover.gif") bottom center no-repeat;
        color:#FFFFFF;
        text-decoration:none;
        }
#menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
#menu li:hover ul{
    display:block;

    }
#menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
#menu li:hover li a{
    background:none;

    }
#menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
#menu li ul a:hover, #menu li ul li:hover a{
        background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
        border:0px;
        color:#ffffff;
        text-decoration:none;
        }
#menu p{
    clear:left;
    }
    li.activetab{ background-color: #F03 !important;}

Answer 1

添加carsouel-inner 类和carousel-item 类然后添加active 类

$(".carousel-inner .carousel-item:first-child").addClass("active");

Answer 2

我这样做的方法是使用jQuery的.closest() function。

我会在每个第一个li中添加一个类（例如top-level）。

 <ul id="nav">
     <li id="menu_home" class="top-level"><a href="../index.html">home</a></li>
     <li><img src="../images/dropdown/nav_divider.gif" alt=""></li>
     <li id="menu_admitere"  class="top-level"><a href="../admitere/admitere.php?expandable=0">ADMITERE</a>
      ...

在每个链接上我都会使用最近的顶层并使其处于活动状态（或者用于保持标签打开的类别）

function setActive() {
  aObj = document.getElementById('content2-colsx').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) {
    $(aObj[i]).closest(`top-level`).addClass("active");
  }
}

Answer 3

将此代码放在页面底部，就在</body>：

上方

$('#content2-colsx a').each(function() {
  $(this).closest('li').addClass('active');
});

将此放在页面底部的原因是，到那时DOM已经填充了相关元素 - 因此不需要添加'onload'事件处理程序。

正如您将要使用JQuery一样，您也可以使用该库提供的选择器函数来简化代码，而不是使用getElementById。

修改

很抱歉，刚才意识到你在原来的问题中没有真正提到过JQuery。要使上述内容有效，您应该将其包含在页面的<head>元素中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

我建议您使用JQuery执行此任务，因为您的代码不仅更易于阅读，而且如果您刚开始使用Dreamweaver模板中的代码，它可能会更容易你可以使用一个记录良好，使用良好的库。而不是直接钻研JavaScript。

如果你想去本土路线，我建议你买一份：

Douglas Crockford的 JavaScript：好的部分

John Resig的 Pro Javascript技术

jquery在子选择上添加class .active第一个元素

目前问题是在首次访问网页时激活index.html，它只在选择元素后才有效。

3 个答案: