html ,可以动态添加的导航菜单的样式问题

html ,可以动态添加的导航菜单的样式问题,第1张

不要用foreach,改成for语句,然后把i添加到那个变量明上,假设变量是dpactive,那么就会变成dpactive0,dpactive1,dpactive2......,这样名字就唯一了

比如你的$c.name+i字符串作为这个变量

这个用jQuery就的toggle函数可以实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script   src="

>

    <style>

        .main

        {

            list-style: none

            float: left

            margin-left: 20px

        }

        .main li

        {

            list-style: none

            text-align: left

            margin-left: -40px

        }

        .main ul

        {

            display: none

        }

        .main a

        {

            text-decoration: none

        }

        .main li a

        {

            text-decoration: none

        }

    </style>

</head>

<body>

<ul id="uid">

    <li class="main"><a href="#">菜单一</a>

    <ul>

        <li><a href="#">子菜单</a></li>

        <li><a href="#">子菜单</a></li>

        <li><a href="#">子菜单</a></li>

    </ul>

    </li>

    <li class="main"><a href="#">菜单二</a>

        <ul>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

        </ul>

    </li>

    <li class="main"><a href="#">菜单三</a>

        <ul>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

        </ul>

    </li>

</ul>

</body>

<script >

$(document).ready(

    function () {

        $(".main").hover(function () {

            $(this).children("ul").toggle()

        })

    }

)

</script>

</html>

3种实现方式

点击导航,页面刷新,加载完成后重新使导航内容为刷新前的内容,通过url中传参就可以达到了。

采用单页面的方式,内容都写在页面中,初始化时,仅显示当前内容,其他内容隐藏,通过点击导航条来切换需要显示的内容。

采用iframe的方式,要显示的内容在主html中,内容显示在html的iframe标签中,通过改变iframe的src来加载不同的内容。

目前很多网站都是采用第一种方式;论体验,第二种方式好;论方便,选择1,3种方式!


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7079856.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-01
下一篇2023-04-01

发表评论

登录后才能评论

评论列表(0条)

    保存