中英文切换导航栏（最简单）

Posted 2020-12-24 luowenshuai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了中英文切换导航栏（最简单）相关的知识，希望对你有一定的参考价值。

使用ul li标签构建导航栏，在li中设置两个并列标签<a>和<span>，分别装有中文和英文，利用css:hover伪类设置显示隐藏。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中英文切换导航栏</title>
<style type="text/css">
    *{margin:0px;padding:0;}
    ul{overflow: hidden;}
    li{
        width:120px;
        height:30px;
        float:left;
        list-style:none;
        margin-left:1px;
        text-align:center;
        background:#dfdfdf;
        line-height:30px;
        color:#4e4e4e;
    }
    a{
        display:none;
        background:#df4e19;
        text-decoration:none;
        color:#eefff0;
    }
    li:hover>a{display:block;}
    li:hover>span{display:none;}
</style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a><span>Home</span></li>
        <li><a href="#">博客</a><span>Blog</span></li>
        <li><a  href="#">作品</a><span>guestbook</span></li>
        <li><a href="#">挑选</a><span>Pickbar</span></li>
        <li><a href="#">粉丝</a><span>fansir</span></li>
    </ul>
</body>
</html>

以上是关于中英文切换导航栏（最简单）的主要内容，如果未能解决你的问题，请参考以下文章

禁用导航抽屉，在片段中切换主页按钮/向上指示器

小程序--导航栏切换（tab切换）

带有片段和底部导航栏的 Android FloatingActionButton

如何在切换片段时停止 AsyncTask？

jquery实现简单的导航栏切换效果($(this).index)