怎么用js做出自定义菜单对li标签 右键 删除变颜色 效果

怎么用js做出自定义菜单对li标签 右键 删除变颜色 效果,第1张

js里面没有直接的右击事件,可采用onmousedown事件进行判断实现。如下:

document.getElementById("test").onmousedown = function(e){

                if(e.button ==2){

                    //alert("你点了右键")

                    //这样设计你的颜色样式...

                }else if(e.button ==0){

                    alert("你点了左键")

                }else if(e.button ==1){

                    alert("你点了滚轮")

                }

            }

2、数据的过滤方法有很多,javaScript 、jQuery里面的filter函数,鉴于本题,最好采用angularJs实现。总体 参考代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">

    </script>

    <script type="text/javascript">

        window.onload = function(){

            //去掉默认的contextmenu事件,否则会和右键事件同时出现。

            document.oncontextmenu = function(e){

                e.preventDefault()

            }

            document.getElementById("test").onmousedown = function(e){

                if(e.button ==2){

                    alert("你点了右键")

                    //这样设计你的颜色样式...

                }else if(e.button ==0){

                    alert("你点了左键")

                }else if(e.button ==1){

                    alert("你点了滚轮")

                }

            }

        }

    </script>

</head>

<body>

<div ng-app="myApp" ng-controller="namesCtrl">

    <p>输入过滤:</p>

    <p><input type="text" ng-model="test"></p>

    <ul>

        <li ng-repeat="x in names | filter:test | orderBy:'pin'">

            {{ (x.name | uppercase) + ', ' + x.pin }}

        </li>

    </ul>

</div>

<script>

    angular.module('myApp', []).controller('namesCtrl', function($scope) {

        $scope.names = [

            {name:'张三',pin:'zhang san'},

            {name:'王斌',pin:'wang bin'},

            {name:'张春桥',pin:'zhang chun qiao'},

            {name:'王滨',pin:'wang bin'}

        ]

    })

</script>

<div style="width: 600pxheight:50pxmargin:autoborder:1px solid pink" id="test">

    <p>朝鲜新建农场</p>

</div>

</body>

</html>

//把你的js代码替换成这个

 $('#three_liest li').bind("click",function(){

           $(this).addClass("active").siblings().removeClass("active")

        })

<style type="text/css">

.add{ color:#ff0}

</style>

<div>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

</div>

<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("div ul li").click(function(){

$(this).addClass("add").siblings().removeClass("add")

})

})

</script>


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

原文地址: http://outofmemory.cn/bake/11847802.html

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

发表评论

登录后才能评论

评论列表(0条)

保存