更改菜单上的文本，单击

Change text on menu click

本文关键字：文本 单击 菜单      更新时间：2023-09-26

我正在尝试创建一个菜单系统，根据当时点击的菜单更改文本，因为我不想创建几十个几乎相同的页面，需要加载负载。我在网上看了看，但我没有找到任何东西，可能是因为我没有使用正确的关键词，但我想知道最好的方法是什么来完成这一点?我发现你可以使用css中的可见性标签来隐藏文本，但这会留下很多空白行，因为我要显示很多文本，这会看起来很糟糕

HTML: 

    <html>
  <head>
    <script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
    <script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/menu.css">
  </head>
  <body>
    <div id="accordian">
        <ul>
            <li class="active">
                <h3><span class="icon-dashboard"></span>Menu 1</h3>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>
                    <li><a href="#">Submenu 3</a></li>
                </ul>
            </li>
            <li>
                <h3><span class="icon-tasks"></span>Menu 2</h3>
                <ul>
                    <li><a href="#">Submenu 4</a></li>
                    <li><a href="#">Submenu 5</a></li>
                    <li><a href="#">Submenu 6</a></li>
                </ul>
            </li>
            <li>
                <h3><span class="icon-calendar"></span>Menu 3</h3>
                <ul>
                    <li><a href="#">Submenu 7</a></li>
                    <li><a href="#">Submenu 8</a></li>
                    <li><a href="#">Submenu 9</a></li>
                </ul>
            </li>
      </ul>
    </div>
  </body>
</html>
CSS: 

 @import url(http://fonts.googleapis.com/css?family=Nunito);
* {margin: 0; padding: 0;}
body {
    background: #4EB889;
    font-family: Nunito, arial, verdana;
}
#accordian {
    background: #004050;
    width: 250px;
    margin: 100px auto 0 auto;
    color: white;
    box-shadow:
        0 5px 15px 1px rgba(0, 0, 0, 0.6),
        0 0 200px 1px rgba(255, 255, 255, 0.5);
}
#accordian h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    background: #003040;
    background: linear-gradient(#003040, #002535);
}
#accordian h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
    font-size: 16px;
    margin-right: 10px;
}
#accordian li {
    list-style-type: none;
}
#accordian ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
}
#accordian ul ul li a:hover {
    background: #003545;
    border-left: 5px solid lightgreen;
}
#accordian ul ul {
    display: none;
}
#accordian li.active ul {
    display: block;
}
jQuery: 

$(document).ready(function(){
    $("#accordian h3").click(function(){
    if(!$(this).next().is(":visible")) {
        $(this).next().slideDown();
        } else {
            $(this).next().slideUp();
        }
    })
})

你不需要改变css，尝试使用hide()和show()

这里有一个例子

感谢大家的帮助。我通过在菜单链接和切换显示上使用opentab功能使其工作。有人建议过，但他们似乎已经删除了他们的答案。

相关文章：