一个js的应用,一个九宫格的位子选取方法,自己想的办法,虽然不是很优秀,要用的时候可以以备不时之需。
选取的页面HTML代码:
<div class="position" style="display: none; position: absolute; top: 517px; left: 617.5px;">
<ul class="area">
<li class="" id="s-1"><a href="#" class="set-position" id="1" >左上</a></li>
<li id="s-2"><a href="#" class="set-position" id="2" >中上</a></li>
<li id="s-3"><a href="#" class="set-position" id="3" >右上</a></li>
<li id="s-4"><a href="#" class="set-position" id="4" >左边</a></li>
<li class="selected" id="s-5"><a href="#" class="set-position" id="5" >中间</a></li>
<li id="s-6"><a href="#" class="set-position" id="6" >右边</a></li>
<li id="s-7"><a href="#" class="set-position" id="7" >左下</a></li>
<li id="s-8"><a href="#" class="set-position" id="8" >中下</a></li>
<li id="s-9"><a href="#" class="set-position" id="9" >右下</a></li>
</ul>
<p class="submit"><button type="button" class="submit" id="chose-position">确定</button></p>
</div>
js的监听方法:
var setPosition = D.getElementsByClassName('set-position');
E.on(setPosition,'click',function(ev){
var newId = this.id;
//老的状态值通过class取,郁闷的是有两个,第二个才是:(
var oldId = D.getElementsByClassName('selected')
[2].id;
D.removeClass(oldId,'selected')
D.addClass('s-'+newId,'selected');
form.elements['position'].value = this.id;
});
var oldId = D.getElementsByClassName('selected')[2].id;
应该写:
var oldId = D.getElementsByClassName('selected','li')[0].id;
效果会好些!
分享到:
相关推荐
<video id="my-video" class="video-js vjs-default-skin"> var player = videojs('my-video', { controls: true, width: 320, height: 240, plugins: { record: { audio: true, video: true, maxLength...
<video id="myPlayer" class="video-js vjs-default-skin"> <!-- 视频源 --> <script src="path/to/video.min.js"> <script src="path/to/videojs-overlay.js"> var player = videojs('myPlayer', { ...
<video id="myPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{"techOrder": ["flash", "html5"]}'> <source src="rtmp://your.streaming.server/your...
在Laravel框架中,JavaScript路由(laravel-js-routing)是一个非常实用的功能,它允许你在前端JavaScript代码中直接访问后端定义的路由,从而实现前后端的无缝协作。这个功能尤其适用于那些采用SPA(单页应用)架构...
`js-css-tooltip`是一个利用JavaScript和CSS3技术打造的高效、美观的Tooltip插件。这款插件不仅提供了丰富的自定义选项,还引入了CSS3动画效果,使得提示信息的展示更具吸引力和用户体验。 **一、核心功能** 1. **...
缩小类名可让您在源代码中编写冗长的类名,并将较小的包分发给用户或应用程序。 用例包括: 小型代码竞赛,例如 嵌入式设备,例如路由器管理面板,例如 移动和响应网站,以保持较低的延迟,例如 posthtml-...
在这个“html css js网页制作实例-model-for-network-id开发笔记”中,我们将深入探讨这三个技术如何协同工作,特别是如何应用到网络ID的识别与处理。 HTML是网页的骨架,通过一系列标签来定义内容的结构,如`...
使用jQuery可以轻松地编写出功能强大的Web应用,而无需深入学习复杂的JavaScript语法。 #### 实现原理 在上述代码片段中,我们使用了jQuery的选择器和事件绑定方法来实现互斥性的功能。具体步骤如下: 1. **选择...
EXT JS 3.0 Core Class Diagram 是一个关于EXT JS库核心类结构的图表,它展示了EXT JS 3.0版本中的主要组件和它们之间的关系。EXT JS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序,其核心功能包括...
<video id="myPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{}'> <source src="your-m3u8-url.m3u8" type="application/x-mpegURL"> ``` 在上述...
总的来说,"Assignment-Tanvir-class-11-"这个作业涵盖了HTML的基础结构、语义化标签的使用、与CSS和JavaScript的结合应用等多个关键知识点。通过这个练习,Tanvir将能够掌握创建静态网页的基本技能,并为未来学习更...
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> ``` 3. 处理浏览器不支持的HTTP方法(PUT、DELETE) 由于浏览器的HTML `<form>`...
JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在客户端脚本编写方面极为常见。在本文中,我们将深入探讨如何使用JavaScript来实现中国农历的功能,以及创建一个美观、清爽的日历界面。 首先,...
选择器是jQuery的精髓,它极大地简化了CSS选择器的使用,如`$("#id")`用于选取ID为`id`的元素,`$(".class")`用于选取所有class为`class`的元素。DOM操作则允许我们方便地添加、删除和修改元素,如`$(element).html...
CSS选择器用于定位HTML元素,如`#id`选择具有特定ID的元素,`.class`选择所有具有特定类的元素,`tag`选择所有特定标签的元素。CSS3引入了更多的样式和布局功能,如伪类、过渡、动画、媒体查询等,使网页设计更加...
接下来,我们需要创建一个用于显示日期和时间选择器的输入框,并为其添加一个ID以便于后续JavaScript操作: ```html <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group...
`selector`可以是CSS选择器,如`$("#id")`选取ID为`id`的元素,`$(".class")`选取所有class为`class`的元素。 - `$(element).html()`:获取或设置元素的HTML内容。 - `$(element).append()`/`.prepend()`:在元素...
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"example_option": true}'> ``` 在上面的代码中,`data-setup`属性用于传递配置选项,`<source>`...
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{}'> <source src="my-video.mp4" type='video/mp4'> <source src="my-video.webm" type='video/webm'> ...
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">首页 <span class="sr-only">(current)...