一个页面中出现多个tab标签，js方法

最新推荐文章于 2024-01-29 16:59:48 发布

原创最新推荐文章于 2024-01-29 16:59:48 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

40 篇文章

订阅专栏

6 篇文章

订阅专栏

本文深入探讨了教育与技术的融合，通过多维度内容导航系统，实现不同年级、社团、专区分层展示，同时结合前端、后端、移动开发等技术领域，提供丰富的教育资源和活动信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-size:18px;color:#6666CC;">
<span style="font-size:32px;"><span style="background-color: rgb(255, 0, 0);"><span style="color:#FFFF33;"><strong>方法一</strong></span></span></span>
未写样式 ，但是出来基本的框架，如此写就可以了。看标红的地方就是需注意修改的地方，其他地方，结构大致相同就可以了。
切记，必不可少的为ul，li在两个div中都必须出现。</span>
这是方法一。，还有方法二

<script>

function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}

</script>


        <ul id="<strong><span style="color:#FF0000;">menu1</span></strong>" class="menu">
            <li class="hover" onmouseover="<strong><span style="color:#FF0000;">setTab(1,0)</span></strong>">初一</li>
            <li onmouseover="<strong><span style="color:#FF0000;">setTab(1,1)</span></strong>">初二</li>
        </ul>
      <div class="tabs_content">
          <div id="<strong><span style="color:#FF0000;">main1</span></strong>" class="content">
             <ul class="block"><li>初一某同学得了奖学金</li></ul>
             <ul><li>初二某同学得了奖学金</li></ul>
          </div>
      </div>



        <ul id="<strong><span style="color:#FF0000;">menu2</span></strong>" class="menu">
            <li class="hover" onmouseover="<strong><span style="color:#FF0000;">setTab(2,0</span></strong>)">新闻社</li>
            <li onmouseover="<strong><span style="color:#FF0000;">setTab(2,1)</span></strong>">瑜伽社</li>
        </ul>
    <div class="tabs_content">
        <div id="<strong><span style="color:#FF0000;">main2</span></strong>" class="content">
            <ul class="block"><li>新闻社现在招新成员，欢迎大家踊跃报名</li></ul>
            <ul><li>瑜伽社上周在全市瑜伽比赛中荣获第一的好成绩</li></ul>
        </div>
    </div>

        <ul id="<strong><span style="color:#FF0000;">menu3</span></strong>" class="menu">
            <li class="hover" onmouseover="<strong><span style="color:#FF0000;">setTab(3,0)</span></strong>">幼儿专区</li>
            <li onmouseover="<strong><span style="color:#FF0000;">setTab(3,1)</span></strong>">小学生专区</li>
        </ul>

    <div class="tabs_content">
        <div id="<strong><span style="color:#FF0000;">main3</span></strong>" class="content">
            <ul class="block"><li>现在是换季的时节，各位家长应注意</li></ul>
            <ul><li>市里组织小学六年级统考，来摸底，为明年升学做准备</li></ul>
        </div>
    </div>

<span style="font-size:18px;color:#6666CC;"><span style="font-size:32px;"><span style="background-color: rgb(255, 0, 0);"><span style="color:#FFFF33;"><strong>方法一</strong></span></span></span></span>

<script>


 function setTad(name,cursel,n){
     for(i=1;i<=2;i++)
    {
        var oMenu = document.getElementById(name+i);
        var oCon = document.getElementById('con_'+name+'_'+i);
        oMenu.className = i==cursel?'hover':'';
        oCon.className =i==cursel?'current':'undis'
    }
 }

</script>

<div class="content_three_right f_left">
                <div class="news" id="">
                    <h2>
                        <a href="#" id="<strong><span style="color:#FF0000;">news1</span></strong>" class="hover" onmouseover="<strong><span style="color:#FF0000;">setTad('news',1,2)</span></strong>">学区房</a>
                        <a href="#" id="<strong><span style="color:#FF0000;">news2</span></strong>" onmouseover="<strong><span style="color:#CC0000;">setTad('news',2,2)</span></strong>">推优</a>
                    </h2>
                </div>  
                <div class="newscon" id="main4">
                    <div id="<strong><span style="color:#FF0000;">con_news_1</span></strong>" class="current">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真1111统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>

                    </div>
                    <div id="<strong><span style="color:#FF0000;">con_news_2</span></strong>" class="undis">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>
                    </div>
                </div>    




<pre name="code" class="html"><div class="content_three_right f_left">
                <div class="news" id="">
                    <h2>
                        <a href="#" id="<strong><span style="color:#FF0000;">newss1</span></strong>" class="hover" onmouseover="<strong><span style="color:#FF0000;">setTad('newss',1,2)</span></strong>">学区房</a>
                        <a href="#" id="<strong><span style="color:#FF0000;">newss2</span></strong>" onmouseover="<strong><span style="color:#CC0000;">setTad('newss',2,2)</span></strong>">推优</a>
                    </h2>
                </div>  
                <div class="newscon" id="main4">
                    <div id="<strong><span style="color:#FF0000;">con_newss_1</span></strong>" class="current">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真1111统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>

                    </div>
                    <div id="<strong><span style="color:#FF0000;">con_newss_2</span></strong>" class="undis">
                        <div class="l6_kecontent fl">
                            <ul>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>
                                <li>2014年中考真题汇总及分数线统计总及分数</li>   
                            </ul>
                        </div>
                    </div>
                </div>