个人中心
gpt4 book ai didi

javascript - 如何将导航更改为选项卡菜单

转载 作者：行者123 更新时间：2023-11-30 16:53:01 25 4
gpt4 key购买 nike

我想像标签菜单一样更改我的导航栏。示例如下

示例 http://jsfiddle.net/Sherbrow/h6rQ2/3/

但我想要纯 javascript..

我的代码在这里:

    #navbar{
        width: 660px;
    }
    #navbar #holder{
        height: 64px;
        border-bottom: 1px solid #000000;
        width: 630px;
        padding-left: 0px;
    }
    #navbar #holder ul{
        list-style: none;
        margin: 0;
        padding: 0;


    }
    #navbar #holder ul li a{
        text-decoration: none;
        float: left;
        margin-right: 5px ;
        font-family: "Arial Black",Gadget,sans-serif;
        color: #000000;
        border: 1px solid #000000;
        border-bottom: none;
        padding: 23px;
        /*width: 86px;*/
        text-align: center;
        display: block;
        background: #69F;
        -moz-border-radius-topleft:35% ;
        -moz-border-radius-topright:15px ;

    }
    #navbar #holder ul li a:hover{
        background: #F90;
        color: #FFF;
        text-shadow:1px 1px 1px #000 ;
    }
    #holder ul li a #onlink{
        background: #ffffff;
        color: #000000;
        border-bottom: 1px solid #ffffff;

    }
    #holder ul li a #onlink:hover{
        background: #ffffff;
        color: #69f;
        text-shadow: 1px 1px 1px #000;
    }
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id ="navbar">
            <div id="holder">
                <ul>
                    <li><a href ="#" id="onlink">Find a ride</a></li>
                    <li><a href ="#" id="onlink">Offer to ride</a> </li>
                </ul>
                <div id="tabs-1">
                    <p>hai</p>
                </div>
                <div id="tabs-2">
                    <p>hello</p>
                </div>
            </div>
         </div>
    </body>
</html>

我只需要 javascript..

请大家帮忙... 感谢提前

最佳答案

制作标签页所需要做的就是根据需要显示和隐藏元素

HTML:

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .nav{
                height: 40px  ;
                width: 500px;
                background: #A9A9A9;
            }
            .nav ul{
                margin: 0%;
                padding: 0%;
            }
            .nav ul li{
                list-style: none;
            }
            .nav ul li a{
                text-decoration: none;
                float: left;
                display: block;
                padding: 10px 20px ;
                color: #000000;
            }
        </style>
    </head>

    <body>
        <div class ="nav">
            <ul>
                <li><a href="#" onclick='hideandshow({"hideid":"2cont","showid":"1cont"})'>Find a ride</a>
                </li>
                <li ><a href="#" onclick='hideandshow({"hideid":"1cont","showid":"2cont"})' >
                Offer to ride</a></li>
            </ul>
        </div>
        <div class ="nav">
            <ul>
                <li id="1cont"><a href="#" >Find a ride Content </a></li>
                <li id="2cont" style="display:none"><a href="#">Offer to ride Content</a> </li>
            </ul>
        </div>
    </body>
</html>

Js:

function hideandshow(obj){
  document.getElementById(obj.showid).style.display="block";
  document.getElementById(obj.hideid).style.display="none";
}

我为此添加了密码 http://codepen.io/anon/pen/vOGKvW

根据您的要求更改 html 和样式

关于javascript - 如何将导航更改为选项卡菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30207373/

25 4 0
文章推荐： javascript - pixi.js 中的事件数据
文章推荐： c - 将 C 二叉树根值保存在变量中
文章推荐： c - 将数组中的数字转换为整数。 (和更多)
文章推荐： javascript - AngularJS 集中数据和 Restful 服务
行者123
个人简介

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

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