Question

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

但我想要纯粹的javascript ..

我的代码在这里：

＆＃13;

    #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;
    }

＆＃13;

<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>

＆＃13;

我只需要javascript ..

请任何人帮忙...... 谢谢你提前

Answer 1

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

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和样式

Answer 2

你说你想用纯粹的javascript实现这个目标，但我想向你展示一些更好的东西：没有javascript。

使用CSS伪元素:target（或::target）可以获得相同的行为：
Mozilla Developer Network - :target

这适用于大多数浏览器（即使在Internet Explorer 9或更高版本中）。
这是一个JS小提琴示例，介绍如何将其用于＆＃34;标签＆＃34;效果：
JSFiddle : Tabs using :target pseudo-element

＆＃13;

#tabs
{
    position: relative;
}

.tab
{
    background-color: white;
    position: absolute;
    width: 100%;
    min-height:50px;
    border: 1px solid grey;
}

.tab:target
{
    z-index: 2;
}

＆＃13;

<ul>
    <li><a href="#tab1">Tab 1 </a></li>
    <li><a href="#tab2">Tab 2 </a></li>
    <li><a href="#tab3">Tab 3 </a></li>
    <li><a href="#tab4">Tab 4 </a></li>
</ul>
<div id="tabs">
    <div class="tab" id="tab1">
        hi this is tab 1
    </div>
    
    <div class="tab" id="tab2">
        hi this is tab 2
    </div>
    
    <div class="tab" id="tab3">
        hi this is tab 3
    </div>
    
    <div class="tab" id="tab4">
        hi this is tab 4
    </div>
</div>

＆＃13;

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

2 个答案: