怎么用vue.js实现一个二级导航栏

JavaScript015

怎么用vue.js实现一个二级导航栏,第1张

一、打开Dreamweaver，点击 文件-新建 菜单，创建一个HTML文件，输入网站导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接。然后保存该网页文件。 二、点击 窗口-行为 菜单，打开行为面板。

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下: 1.被点击时的效果可以用div:active{ css } 2.鼠标覆盖在上面的时候可以用div：hover{ css} 3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下： a.先给div添加一个选中的样式比如on{css}； b.然后在js中$('div').click(function{ $('div').toggleClass(' ','on')}) 这是jquery自带的一个方法，点击div切换2个class,

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>

<style>

.a ul li{width:200pxheight:autoclear:bothfloat:left}

.small ul li{width:50pxheight:25pxcursor:pointerclear:bothfloat:left}

.small ul li.cli{background:#09f}

</style>

<script>

$(function(){

$('.small ul li').each(function(index, element) {

        $(this).click(function(){

$('.big').removeAttr('style')

$('.small ul li').removeClass('cli')

$(this).attr('class','cli')

$(this).parents('li').eq(0).find('.big').css('background','#f00')

})

    })

})

</script>

<div class="a">

<ul>

     <li>

         <div class="big">大菜单1</div>

            <div class="small">

             <ul>

                 <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                </ul>

            </div>

        </li>

        <li>

         <div class="big">大菜单2</div>

            <div class="small">

             <ul>

                 <li>5</li>

                    <li>6</li>

                    <li>7</li>

                    <li>8</li>

                </ul>

            </div>

        </li>

    </ul>

</div>

刷新那个需要写入cookie辅助，我找个给你