个人中心
gpt4 book ai didi

javascript - jquery在子选择上添加类.active第一个元素

转载 作者：行者123 更新时间：2023-12-01 01:52:05 24 4
gpt4 key购买 nike

我使用下面的代码将 .active 类添加到站点链接，但当我单击菜单项或其中一个子项时，我需要在顶部的导航菜单上添加 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>

<小时/>

在这里，我们是我的 friend ，现在我可以拥有我需要的所有事件元素，并且还可以选择第一个选项卡来记住我正在访问哪个菜单类别或子菜单。当然，使用 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;}

最佳答案

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

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

关于javascript - jquery在子选择上添加类.active第一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7384372/

24 4 0
文章推荐： javascript - 向表中添加行时如何更改 Div Id 值
文章推荐： javascript - 表单无法提交并给出错误消息
文章推荐： shell - Powershell脚本在Jenkins中没有失败
文章推荐： javascript - 如何在js或jQuery中检测ctrl +滚动？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com