css怎么给第4个li和第8个li之间设置样式

css怎么给第4个li~8个li设置样式,有没有比连续写五个li:nth-child好
图片说明

14个回答

用jquery的话,就是
用ul>li的:gt(2)和:lt(8)即可处理。

 $('li').filter(function (index) {return index>2&&index<8 }).css('color','#f00')

$('ul li:eq(3)').css('color', 'red');
$('ul li:eq(4)').css('color', 'red');
$('ul li:eq(5)').css('color', 'red');
$('ul li:eq(6)').css('color', 'red');
$('ul li:eq(7)').css('color', 'red');

需要设置样式的标签都定义一个class 然后只对该class设置样式 这样比较好了

weixin_36977678
乔岱马 就设置一个间距而已
2 年多之前 回复

肯定是共用一个类名啊

css 伪元素选择器

<!DOCTYPE html>



Insert title here .addstyle{ border: 2px solid; }


1111111
    var i = 1; var sul = document.getElementById('uu'); while(i<10){alert(22) var lia = document.createElement("li"); lia.appendChild(document.createTextNode('new'+i)); if(i%4 == 0){alert(333) lia.setAttribute("class","addstyle"); } sul.appendChild(lia) ; i++; }


li{color:red}
li:nth-child(4n){color:blue}

直接在第四个和第八个li之间加类标签 控制就行了

共用一个name,给name添加属性就可以了

共14条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
css ul li 居中问题,li left之后还是实现居中

代码如下,像是这种,如何让多个li float之后,还是居中?我给ul加了宽度之后,只是ul居中,UL里面的li还是float:left排列,怎么实现ul里面的li居中?![图片说明](https://img-ask.csdn.net/upload/201609/27/1474985484_730050.jpg) ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> ul{ list-style:none; margin:0 auto; text-align:center; background-color:#90F8B5} li{ width:72px; height:38px; background-color:#999; margin:15px; float:left;} </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> ```

想问关于html,css基础问题,关于块之间的间隙。

想问的是为什么红色框框和灰色框框之间有条缝隙,我用浏览器查看发现没有项目占着那个位置,但是就是有个空隙在中间。 html的代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <title>My First Website</title> </head> <body> <header> <nav class="clearfix"> <!--导航开始--> <div class="logo c1">FIRST</div> <div class="items c2"> <ul> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> </div> </nav> <div class="inner"> <h1>My First Website</h1> <div class="h1-sub"> 16.11.09 </div> </div> </header><!--导航结束--> <div class="content"><!--内容开始--> <div class="contanter"> <div class="story-item"> <h2>第一个只用了html和css的网站</h2> <div class="summary">用了只是学了两三天的技能来实现一个网页的布局,看似简单却一点都不容易,margin的问题真的很多,div也是一个大问题,主要是要理解选择器之间的关系。 </div> <div class="info">16.11.10|作者:Chan|阅读:1</div> </div> </div> </div><!--内容结束--> <footer><!--页尾开始--> </footer><!--页尾开始--> </body> </html> ``` css的代码 ``` *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1{ margin: 20px; } ul{ margin: 0; padding: 0; } .c1,.c2{ position: relative; float: left; } .c1{ width: 16.666666%; } .c2{ width: 83.333333%; } .clearfix:before { content: " "; display:table; } .clearfix:after { content: " "; display:table; } .logo{ font-size: 20px; padding: 18px; font-weight: 900; color: #ddd; } header{ min-height: 350px; background-color: #aaa; } nav{ background-color: #333; } nav .items ul{ float: right; padding-right: 20px; } nav ul li{ list-style: none; display: inline-block; } nav ul li a{ display: inherit; text-decoration: none; padding: 20px 10px; color: #fff; } /*nav end*/ .inner { width: 400px; margin: 150px auto 20px; position: relative; text-align: center; } .h1-sub{ font-weight: 900; text-align:right; padding: 20px; } .contanter{ width: 1000px; margin: 0 auto; background-color: red; } .story-item h2{ font-size: 30px; margin: 10px 0; font-family: Microsoft Yahei; color: #444; } .story-item .summary{ font-size: 18px; font-family: Microsoft Yahei; width: 500px; font-weight: 100; color: #777; } ```

li标签无法正常显示,display值为none

1 代码 ``` <style> .ck-slide{ width:720px; } .ck-slide-wrapper{ height: 100%; } </style> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="../github/myck_slide-master/images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="../github/myck_slide-master/images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="../github/myck_slide-master/images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <script src="../github/myck_slide-master/js/myslide.js"> </script> <script> /* $(".ck-slide").ckSlide({ autoPlay:true })*/ </script> </div> //引入的外部样式 * { margin: 0px; padding: 0px; } .ck-slide { margin: 100px 0 0 0; left: 50%; margin-left: -400px; width:800px; position: relative; } .ck-slide .ck-slide-wrapper { top: 0; left: 0; z-index: 1; width:100%; position: absolute; } .ck-slide-wrapper li{ list-style: none; display: block; } ``` 2 显示效果 ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576361_55061.png) ![图片说明](https://img-ask.csdn.net/upload/201610/27/1477576370_818515.png) 3 问题 想实现的效果是轮播。 上述代码在浏览器中打开的时候可以正常显示第一章图片。 按照我个人的理解,ul下面放置了li标签,并且ck-slide样式被设置了指定的宽度居中显示,那么ul下面的li标签会在垂直方向上分布显示,但是实际效果却仅仅显示了第一张图片的效果。通过提示工具查看发现ul下面的li标签除了第一个li标签外 其他li标签的display被设置为了none,这是为什么呀??我没有设置display为none呀 ------------------------------------------------------------- # **有朋友提到js文件的问题,这里并没有执行js代码,我提供全部代码:** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/slide.css"> <script src="./js/jquery.min.js"></script> <style> .ck-slide{ width:720px; height:320px; } .ck-slide-wrapper{ height: 100%; } </style> </head> <body> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="#"><img src="images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="#"><img src="images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a> <div class="ck-slideBox"> <div class="slideWrap"> <ul> <li class="current"><em>1</em></li> <li><em>2</em></li> <li><em>3</em></li> <li><em>4</em></li> </ul> </div> </div> </div> </body> </html> ``` 使用到的图片 ![图片说明](https://img-ask.csdn.net/upload/201610/29/1477732376_480707.jpg) 感谢给位朋友的指点!

div#header{样式a} div#header{样式b} header显示哪一个样式

``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>HTML4</title> <!--在W3Cschool上看的一个例子不懂为什么多次给header加样式,显示哪一种样式是以什么为基准?附效果图--> <style> body { font-family:Verdana,sans-serif;font-size:0.8em; } div#header,div#footer,div#content,div#post {<!--这里给header,footer添加样式--> border:1px solid grey; margin:5px;margin-bottom:15px;padding:8px; background-color:white; } div#header,div#footer {<!--这里又添加样式,不懂!--> color:white;background-color:#444;margin-bottom:5px; } div#content { background-color:#ddd; } div#menu ul { margin:0;padding:0; } div#menu ul li { display:inline; margin:5px; } </style> </head> <body> <div id="header"> <h1>Monday Times</h1> </div> <div id="menu"> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </div> <div id="content"> <h2>News Section</h2> <div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> <div id="post"> <h2>News Article</h2> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p> </div> </div> <div id="footer"> <p>© 2014 Monday Times. All rights reserved.</p> </div> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201711/02/1509594312_454574.jpg) ![图片说明](https://img-ask.csdn.net/upload/201711/02/1509594389_996774.jpg)

css加了:hover出现字体乱位

<a>未加:hover ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564490980_59816.png) <a>加了:hover ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564491036_535013.png) ``` <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } #img{/*背景图*/ background-image: url(1.jpeg); } .log{/*文本框*/ width: 300px; height: 40px; margin: 15px 10px 10px 10px;/*上 右 下 左,两个文本框的边距*/ text-indent: 10px; } .box{/*盒子*/ width: 399px; height: 279px; border-radius: 4px; border: 5px solid green; border-color: transparent; padding: 25px; margin: 25px; position: absolute; left: 780px; top: 150px; background-color: white; } .butt{/*登录按钮*/ width: 300px; height: 50px; margin: 10px 10px 10px 10px; background-color: rgba(134,206,47,1.00); } a:hover{ position: absolute; left: 368px; top: 295px; font-size: 15px; text-decoration:none; /*鼠标放上去有下划线*/ } </style> </head> <body id="img"> <div> <div style="text-align: center"> <h1>欢迎你的到来</h1> <div class="box"> <form action="" method="post"> <input type="text" name="ID" placeholder="学号" class="log"><br> <input type="text" name="name" placeholder=" 姓名" class="log"><br> <input type="submit" value="登录" class="butt"> </form> <div> <a href="#">意见反馈</a> </div> </div> </div> </div> </body> </html> ```

Bootstrap 分页标签不显示CSS效果

``` <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> ``` ![图片说明](https://img-ask.csdn.net/upload/201708/16/1502857292_922355.png) 其余部分的标签都有显示。 ``` <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="txt/html; charset=utf-8" /> <title>Lettiy</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/> <style> .left{ float:left; } .right{ float:right; } .rnav{ height:80px; line-height:80px; } .badge{ background-color:teal; } .interface{ width:100px; height:100px; } </style> </head> ``` ``` <!-- 时间轴主体文章部分 --> <div class="col-md-10 left" style="padding:0;"> <!--巨幕显示最新信息--> <div class="jumbotron"> <h1>Welcome to Lettiy!</h1> <p>this is the demo test Page</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <!--文章显示区域 采用表格形式进行填充--> <div class="container-fluid" style"margin-top:50px;"> <table id="postView" style="width:100%;"> <!--第一行--> <tr> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/java.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> </tr> <!--第二行--> <tr> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> <td class="col-md-3"> <div class="thumbnail"> <img src="img/php.png" alt="..."class="interface"> <div class="caption"> <h3>Thumbnail label</h3> <p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p> <p><a href="#" class="btn btn-primary" role="button">More</a></p> </div> </div> </td> </tr> </table> <!--分页器--> <div class="col-md-3 right"> <nav aria-label="Page navigation"> <ul class="pagination pagination-lg"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> </div> </div> </div> ``` ``` <!--BootStrap jquery--> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201708/16/1502857452_49492.png)

在js中控制样式出现问题,求助。

在html页面需要显示以下数据 ``` <!--第一行数据--> <div class="main_store_slide" style="margin-top:70px;"> <div class="swiper-container swiper-container-horizontal swiper-container-free-mode"> <div class="swiper-wrapper"> <!--1--> <div class="swiper-slide swiper-slide-active lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">122</li> <li class="s2">2323</li> </ul> </div> <!--2--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">3434</li> <li class="s2">454</li> </ul> </div> <!--3--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">334</li> <li class="s2">343443</li> </ul> </div> <!--4--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">12</li> <li class="s2">34</li> </ul> </div> </div> </div> </div> <!--end第一行数据--> <!--第二行数据--> <div class="main_store_slide" style="margin-top:70px;"> <div class="swiper-container swiper-container-horizontal swiper-container-free-mode"> <div class="swiper-wrapper"> <!--1--> <div class="swiper-slide swiper-slide-active lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">122</li> <li class="s2">2323</li> </ul> </div> <!--2--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">3434</li> <li class="s2">454</li> </ul> </div> <!--3--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">334</li> <li class="s2">343443</li> </ul> </div> <!--4--> <div class="swiper-slide swiper-slide-next lawyer_b" > <ul class="ul1" style="display: block;"> <li class="s1">12</li> <li class="s2">34</li> </ul> </div> </div> </div> </div> <!--end第二行数据--> …… ``` 因这些数据是从接口中读取,然后在页面上显示, 所以,在js中控制相关样式,如下所示: ``` <script type="text/javascript"> <!-- $(function(){ var str="" var j=0; for(var i=0;i<18;i++){ j++ if(j%4==0){ str+="<div class='main_store_slide' style='margin-top:70px;'>"; str+="<div class='swiper-container swiper-container-horizontal swiper-container-free-mode'>"; str+="<div class='swiper-wrapper'>"; } str+="<div class=\"swiper-slide swiper-slide-active lawyer_b\" >"; str+="<ul class=\"ul1\" style=\"display: block;\">"; str+="<li class=\"s1\">12</li>"; str+="<li class=\"s2\">34</li>"; str+=" </ul> </div>"; if(j%4==0){ str+="</div>"; str+="</div>"; str+="</div>"; } } $("#divid").html(str); }) //--> </script> ``` 请问 以上 js中该 如何修改。 有试过 用 :nth-of-type ,发现 样式乱了。

熟悉jquery及css的朋友进来帮我改进下这个tab选项卡,谢谢

大家好,我很喜欢如下这个选项卡,但是现在碰到一个问题,就是当页面中需要2个或以上个数的选项卡时会出现问题, 怎么使各个<div class="tab">相互独立,不相互影响,并在打开页面时显示[b]选项1和选项4[/b],代码如下: 请各位帮忙: [code="java"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery实现tab淡变选项卡效果</title> <script type="text/javascript" src="jquery1.4.2.min.js"></script> <style type="text/css"> .tab { background-color: #FAFAFA; margin: 5px 8px; padding: 5px 10px; } .tab p span { background-color: #EFEFEF; border: 1px solid #CCCCCC; cursor: pointer; margin-right: 3px; padding: 2px 5px; } .tab p span.current { background-color: #FAFAFA; border-bottom-color: #fafafa; } .tab p { border-bottom: 1px solid #CCCCCC; font-weight: bold; padding: 0 8px 2px; margin: 0; } .tab ul { width:500px; background:url(tu/about.jpg) right no-repeat; margin: 2px auto 2px 8px; padding:0; } .tab li { width:300px; border-bottom: 1px dotted #CCCCCC; padding-bottom: 3px; margin: 2px 0; list-style-type=none; } .tab .mhot, .tab.allhot { display: none; } </style> <script type="text/javascript"> $(document).ready(function() { $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $(".tab ul:not(:first)").hide(); //隐藏其它的UL $(".tab span").mouseover(function() { $(".tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $(".tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); }); </script> </head> <body> <p></p> <p>JS如果没加载请刷新</p> <p></p> <div class="tab"> <p> <span id="tab1">选项1</span><span id="tab2">选项2</span><span id="tab3">选项3</span></p> <ul class="tab1"> <li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="http://www.poluoluo.com" target="_blank">www.poluoluo.com</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a></li></ul> <ul class="tab2"> <li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li></ul> <ul class="tab3"> <li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a> </li><li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li></ul> </div> <div class="tab"> <p> <span id="tab21">选项4</span><span id="tab22">选项5</span><span id="tab23">选项6</span></p> <ul class="tab21"> <li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="http://www.poluoluo.com" target="_blank">www.poluoluo.com</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a></li></ul> <ul class="tab22"> <li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li></ul> <ul class="tab23"> <li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="/jzxy/wytx/jscode/index.html" target="_blank">JS广告代码</a></li><li><a href="http://www.poluoluo.com" target="_blank">破洛洛</a></li><li><a href="/jzxy/wytx/code/index.html" target="_blank">常用代码</a> </li><li><a href="/jzxy/wytx/menu/Index.html" target="_blank">导航菜单</a></li></ul> </div> </body> </html>[/code]

jsp连接数据后样式失效,请大神帮忙!!!

各位大神,本人小白,初学jsp。在做完连接数据库并将数据显示到页面上后,页面的所有样式都无效了,以下是我的代码。 ``` <%@page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@page import="java.util.ArrayList"%> <%@page import="org.cz.bean.Select"%> <% /*如果还未登录系统*/ if (session.getAttribute("user")==null || session.getAttribute("user")=="") out.println("<script>alert('未登录系统!');top.location.href='../login.jsp';</script>"); %> <%-- <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> --%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%-- <base href="<%=basePath%>"> --%> <title>数据查询</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- css文件 --> <link rel="stylesheet" type="text/css" href="../css/s_css/stys_index.css"><!-- 控制布局 --> <link type="text/css" rel="stylesheet" href="../css/s_css/style_index.css"/><!-- 控制样式 --> <!--js文件 --> <script src="../js/s_js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="../js/s_js/s_index.js" type="text/javascript"></script> </head> <body> <% if(request.getAttribute("result")!= null) {%> <script> alert('<%=request.getAttribute("result")%>'); </script> <% } %> <div class="wrap"> <div class="layout"> <div class="content"> <!-- 导航 --> <div class="Mynav"> <div class="menuleft"><a href="#">重管理系统后台</a></div> <div class="menu"> <ul class="nav"> <li></li> <li><a href="#">数据查询</a></li> <li><a href="#">导 出</a></li> <li><a href="#">查 看</a></li> <li><a href="#">退出</a></li> <!-- <li><a href="#">联系我们</a></li> --> </ul> </div> </div> <!-- 数据查询》结果 --> <div class="title"> <p class="title-w">数据查询</p> </div> <!-- 查询结果开始 --> <div class="main" overflow="auto"> <table class="tablenav" id="results"> <caption> <h4><strong>查询结果</strong></h4> <ul class="pagination" style="float:left;"> <% //String Xm = (String)request.getAttribute("Xm"); int recordCount = (Integer)request.getAttribute("recordCount"); //int pageSize = (Integer)request.getAttribute("pageSize"); int currentPage = (Integer)request.getAttribute("currentPage"); int totalPage = (Integer)request.getAttribute("totalPage"); String pageFootStr = ""; int next, prev; prev=currentPage-1;//上一页 next=currentPage+1;//下一页 String actionPath = "Select?action=queryall"; //&Xm=" + Xm pageFootStr+="<form aciont='" + actionPath + "' method=post>"; //pageFootStr += "查询到<span>"+recordCount+"</span>条记录"+" 共<span>"+totalPage+"</span>页"; //pageFootStr +=" 第<span>"+currentPage+"</span>页 "; pageFootStr += "<li><a >共<strong>"+recordCount+"</strong>条记录,<strong>"+totalPage+"</strong>页</a></li>"; if(currentPage>1) pageFootStr += "<li title=首页><a href="+ actionPath + "&currentPage=1"+">&laquo;</a></li>"; else pageFootStr += " &laquo; "; if(currentPage>1) pageFootStr += "<li title=上一页><a href=" + actionPath + "&currentPage=" + prev + ">&lsaquo;</a></li>"; else pageFootStr += "&lsaquo; "; pageFootStr += " <li title=当前页 class=active><a>"+currentPage+"</a></li>"; if(currentPage<totalPage) pageFootStr += " <li title=下一页><a href=" + actionPath + "&currentPage=" + next + ">&rsaquo;</a></li>"; else pageFootStr += "&rsaquo; "; if(totalPage>1&&currentPage!=totalPage) pageFootStr += " <li title=最末页><a href=" + actionPath + "&currentPage=" + totalPage + ">&raquo;</a></li>"; else pageFootStr += "&raquo;"; pageFootStr+="<li>第<input name=currentPage type=text size=2>页 <input type=submit value=GO></form></li>" ; %> </ul> <div style="float:right;padding:5px"> <!-- <a href="#" class="btn" onclick="showAdd()">添加员工</a> --> </div> </caption> <!-- <form method="post" action="Select?action=query2"> --> <thead> <tr> <th>单号</th> <th>净重编号</th> <th>车号</th> <th>业务类型</th> <th>货名</th> <th>发货单位</th> <th>收货单位</th> <th>司机</th> <th>仓库</th> <th>备注</th> </tr> </thead> <tbody> <div> <% //从request域中取得要显示的某页信息 ArrayList selectList = (ArrayList)request.getAttribute("selectList"); /*遍历每个的信息进行显示*/ for(int i=0;i< selectList.size();i++){ Select select = (Select)selectList.get(i); %> <tr> <td><%=select.getCode()%></td> <td><%=select.getCodeNet()%></td> <td><%=select.getCarCode()%></td> <td><%=select.getTheType()%></td> <td><%=select.getSp1()%></td> <td><%=select.getSp2()%></td> <td><%=select.getSp3()%></td> <td><%=select.getSp4()%></td> <td><%=select.getSp5()%></td> <td><%=select.getSp6()%></td> </tr> <% } %> <tr><td colspan=10> <%=pageFootStr %> &nbsp; </td> </tr> </div> </tbody> <!-- </form> --> </table> <!-- 查询结果结束 --> </div> </div> <!--/content--> </div> <!-- /layout --> <jsp:include page="../foot.jsp"></jsp:include> </div> <!-- /wrap --> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201603/24/1458751776_349091.jpg) ![图片说明](https://img-ask.csdn.net/upload/201603/24/1458751820_784105.jpg)

求教:怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏?

怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏? 代码: <div data-v-4a1fb872="" data-v-311834f5="" class="wrapper"> <div data-v-4a1fb872="" class="bg-left" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/index2bg.2dead38.png)"> </div> <div data-v-4a1fb872="" class="part"> <div data-v-4a1fb872="" class="phone" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/phone.1a1ffa5.png)"> <div data-v-4a1fb872="" class="phone-img"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-1.514b9e5.png" alt=""> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-2.fe2440c.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-3.61fa415.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-1.77e24af.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-2.03c77b0.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-3.68454c5.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-1.378751a.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-2.5415338.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-3.3522ddc.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-1.80e2eb2.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-2.67cb670.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-3.dc4d534.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-4.2cbe036.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-1.11fab89.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-2.2b657e7.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-3.f4f1d4b.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-4.4752a09.png" alt="" style="display: none;"> </div> </div> <div data-v-4a1fb872="" class="number"> 02 </div> <div data-v-4a1fb872="" class="con"> <div data-v-4a1fb872="" class="title"> 为销售赋能的小名片 </div> <div data-v-4a1fb872="" class="mark"> 产品展示 </div> <ul data-v-4a1fb872="" class="list"> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon1"> </div> <div data-v-4a1fb872="" class="name"> 小名片展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 统一公司形象,全员分享,小名片直达企业官网,产品、服务的展现 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="0" class="link-item"> 名片信息 </div> <div data-v-4a1fb872="" data-index="1" class="link-item"> 个人信息 </div> <div data-v-4a1fb872="" data-index="2" class="link-item"> 更多信息 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon2"> </div> <div data-v-4a1fb872="" class="name"> 绑定小官网 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 企业官网、产品、服务的完整展现 </p> <p data-v-4a1fb872=""> 帮助访客第一时间了解企业,更快促成业务交流 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="3" class="link-item"> 查看名片 </div> <div data-v-4a1fb872="" data-index="4" class="link-item"> 查看企业小官网 </div> <div data-v-4a1fb872="" data-index="5" class="link-item"> 小官网多样式介绍 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon3"> </div> <div data-v-4a1fb872="" class="name"> 销售雷达展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 访问消息实时推送,名片访客即客户,不加好友就可微信沟通不错过每个商机;探测访客访问动态,让销售沟通更高效 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="6" class="link-item"> 实时推送访客消息 </div> <div data-v-4a1fb872="" data-index="7" class="link-item"> 不加微信好友沟通 </div> <div data-v-4a1fb872="" data-index="8" class="link-item"> 即时聊天 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon4"> </div> <div data-v-4a1fb872="" class="name"> 智能AI分析 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 分析客户兴趣与活跃度,挖掘深度用户 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="9" class="link-item"> 访客数据分析 </div> <div data-v-4a1fb872="" data-index="10" class="link-item"> 访客互动情况 </div> <div data-v-4a1fb872="" data-index="11" class="link-item"> 销售人员能力分析 </div> <div data-v-4a1fb872="" data-index="12" class="link-item"> 销售详情分析 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon5"> </div> <div data-v-4a1fb872="" class="name"> 商机SCRM </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 助销售进行客户标签化管理,客户跟进记录管理,客户AI分析 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="13" class="link-item"> 商机标签化管理 </div> <div data-v-4a1fb872="" data-index="14" class="link-item"> 销售跟进记录 </div> <div data-v-4a1fb872="" data-index="15" class="link-item"> 客户访问轨迹 </div> <div data-v-4a1fb872="" data-index="16" class="link-item"> 客户兴趣分析 </div> </div> </div> </li> </ul> </div> </div> </div> ``` ``` 刚毕业的实习生,在网上扒的网站,但是js没有用,我也没学过js;求教怎么解决? css代码太多了,我也不知道拿那一部分所以就不放了, 这个网站就是我复制的网站 www.xcxzhan.com 里面可以拿到css,js 可以拿下来,但是不知道为什么没有用。 求大佬教学!!!跪谢!!!

麻烦看下这段JQ代码,一点性能问题

``` <head> <style type="text/css"> .scroll_div{width:1000px; height:370px; margin:0 auto; padding:10px;} .scroll_div .pic{width:820px; height:370px; overflow:hidden; position:relative; float:left;} .scroll_div .pic li{width:820px; height:370px; position:absolute; top:0; left:0; display:none;} .scroll_div .btn{float:right; width:173px;} .scroll_div .btn li{width:173px; height:66px; display:block; float:left; text-align:center; color:#fff; font:18px/100% "微软雅黑"; font-weight:bold; background:#008dd8; margin-bottom:10px; line-height:66px; cursor:pointer;} .scroll_div .btn li.on{background:#d73737;} li {list-style:none;} img{width:100%;} </style> </head> <body> <div class="scroll_div"> <ul class="pic"> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> <li><img src="images/5.jpg" /></li> </ul> <ul class="btn"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> <li>项目五</li> </ul> </div> </body> <script type="text/javascript"> $(function(){ var listLen = $(".pic li").length, //li的个数 i=0,//下标初始值 setInter,speen = 1500;//自动运行间隔 /*图片轮播*/ $(".btn li:last").css({"margin":"0px 0px 0px 0px"});//最后一个按钮样式 $(".btn li:first").addClass("on");//为每个按钮增加的样式 $(".pic li:first").show();//第一个图片展示 $(".btn li").each(function(index,element){//点击显示不同图片 $(element).click(function(){ i = index;//选择器位置 $(this).addClass("on").siblings().removeClass("on");//为当前按钮高亮 $(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); })//图片随着按钮的切换动作 $(".pic li").hover(function(){//鼠标悬停停止自动播放(停止Interval) clearInterval(setInter); },function(){ outPlay(); }); }) out_fun = function(){ if(i < listLen){i++;}else{i=0;};//判定位置,超过位置则重置到第一张位置。这里重置到第一张时会有延迟,目测比300多一点。 $(".btn li").eq(i).addClass("on").siblings().removeClass("on"); $(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); } outPlay = function(){ setInter = setInterval("out_fun()",speen);//周期循环调用 } outPlay();//自动播放 }) </script> ``` 这是一段自动播放和切换的JQ代码,然后发现当播放到最后一张跳到第一张时会比平常的播放时间(这里是300)要稍长一点,不知道问题在哪,请问该如何解决或者优化?

求检查一下轮播代码错误!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播学习</title> <style type="text/css"> /*清除默认样式*/ *{margin: 0px;padding: 0px;list-style: none;} /*设置样式*/ .wrap{ height: 170px; width: 500px; overflow: hidden; margin: 100px auto; position: relative; } .wrap ul{ position: absolute; } .wrap ul li{ height: 170px; } .wrap ol{ position: absolute; right: 10px; bottom: 10px; } .wrap ol li{ float: left; height: 20px; width: 20px; background: rgba(255,193,193,0.5); border: 1px solid #FFC125; border-radius: 2px; margin-left: 10px; line-height: 100%; text-align: center; } .wrap ol li.active{ background-color: #330099; color: #fff; border: 2px solid green; } </style> </head> <body> <div id="wrap" class="wrap"> <ul id="pic"> <li><img src="./photos/tu1.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu2.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu3.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu4.jpg" alt="" style="height: 170px;width: 500px;"></li> <li><img src="./photos/tu5.jpg" alt="" style="height: 170px;width: 500px;"></li> </ul> <ol id="list"> <!-- 第一个按钮默认样式 --> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic'), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoplay,2000); // 定义图片切换函数 function autoplay(){ index++; if(index>=list.length) { index=0; } changeoptions(index); } //鼠标移上时,整个容器停止图片自动切换 wrap.onmouseover=function(){ clearInterval(timer); } //鼠标离开时,整个容器开始继续图片自动切换 wrap.onmouseout=function(){ timer=setInterval(autoplay,2000); } //遍历数字导航,实现划过就切换至相应图片 for (var i=0;i<list.length;i++) { list[i].id=i; list[i].onmouseover=function(){ clearInterval(timer); changeoptions(this.id); } } function changeoptions(curindex){ for(var j=0;j<list.length;j++){ list[j].calssName=''; pic.style.top=0px; } list[curindex].calssName='active'; pic.style.top=-curindex*170+'px'; index=curindex; } } </script> </body> </html>

问一个关于一个session的问题在struts2 中

先看看看我的一段代码, [code="java"]public String toLogin() throws Exception { try { Map<String, Register> session=ActionContext.getContext().getSession(); register = authorService.loginValid(userName, passWord); if(register !=null){ session.put("register",register); id = register.getId(); return SUCCESS; }else{ addActionError("用户名/密码不匹配"); this.setTip("<font color='red'>对不起您的帐号或密码有误!</font>"); return "failure"; } } catch (Exception e) { // TODO: handle exception this.setTip("<font color='red'>对不起,系统出现故障,请稍后再登录!</font>"); e.printStackTrace(); return "failure"; } } [/code] [code="java"]<action name="login" class="loginAction" method="toLogin"> <result name="input">/login/authorlogin.jsp</result> <result name="failure">/login/authorlogin.jsp</result> <result name="success" type="redirect"> countmessage.action?id=${id} </result> </action> <action name="countmessage" class="messageAction" method="countMessagAuthor"> <result name="success">/login/author.html</result> </action> [/code] 再看这个页面的数据展现 [code="java"] <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='<s:url action="details"><s:param name = "id" value = "#session.register.id"/></s:url>'> ${session.register.realName}</a></div> [/code] magazineOA/countmessage.action?id=5 第一次登录红色 部分显示在页面上当时就在刷新页面后是${session.register.realName}不再显示。我想是action的问题吧,但是怎么才能把这个为题解决呢? [b]问题补充:[/b] 我想应该是,因为如果我刷新页面的话应该又一次执行countmessage的action,没有执行前面那个action的问题呀,但是应该怎么解决呢?? [b]问题补充:[/b] 本页面刷新后变成这样 [code="java"] <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='/magazineOA/login/details.action'> </a> </div> [/code] [b]问题补充:[/b] 我使用的框架。我只刷新这一个页面,那个没有关系吧?????? 这个问题就是在框架里出现好像、。 [b]问题补充:[/b] [code="java"]<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{ padding:0px; margin:0; color:#073a93; background:url(../images/sleftbg.jpg) repeat-y; font-size:12px;} a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */ :focus { outline: none; } .stitle{ background: url(../images/s_title.jpg) no-repeat; width:82px; height:36px; line-height:30px; padding-left:30px; font-weight:bold;} .SleftDiv{margin-left:6px; margin-top:10px; border:solid 1px #7db5ff;width:112px; background-color:#fff;} ul{padding:0; margin:0; list-style:none;} ul li{ width:100px; background:url(../images/s_leftOL.gif) no-repeat 15px 5px;} ul li a{padding-left:30px; line-height:25px; color:#073a93; text-decoration:none;} ul li a:hover{color:#ffcc00;} </style> <title>用户信息</title> </head> <body> <div class="SleftDiv"> <div class="stitle">用户中心</div> <ul> <li><a href='<s:url action="details"><s:param name = "id" value = "#session.register.id"/></s:url>' target="mainFrame">个人信息</a></li> <li><a href='<s:url action="editpass"><s:param name = "id" value = "#session.register.id"/></s:url>' target="mainFrame">修改密码</a></li> <li><a href="index.jsp" target="_top">退出系统</a></li> </ul> </div> <div class="SleftDiv"> <div class="stitle">投 稿 箱</div> <ul> <li><a href="#">我要投稿</a></li> <li><a href="#">草 稿 箱</a></li> <li><a href="#">已投稿件</a></li> <li><a href="#">发表稿件</a></li> </ul> </div> <div class="SleftDiv"> <div class="stitle">信息中心</div> <ul> <li><a href='<s:url action="receiveMessageA"><s:param name="lastreadTime" value="未读" /></s:url>' target="mainFrame">未读信息(${session.count})</a></li> <li><a href='<s:url action="receiveMessageA"></s:url>' target="mainFrame">收 件 箱</a></li> <li><a href='<s:url action="toAuthorSend"></s:url>' target="mainFrame">写&nbsp;&nbsp;&nbsp;&nbsp;信</a></li> <li><a href='<s:url action="sendout"></s:url>' target="mainFrame">已发信件</a></li> <li><a href='<s:url action="tosend"></s:url>' target="mainFrame">写&nbsp;&nbsp;邮&nbsp;&nbsp;件</a></li> </ul> </div> </body> </html> [/code] 这是我的左侧页面的代码 [code="java"] <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="../images/s.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='<s:url action="details"><s:param name = "id" value = "#session.register.id"/></s:url>'> ${session.register.realName}</a> </div> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableborder"> <tr> <td><div class="tit_tab">通知公告</div></td> </tr> <tr> <td> <div class="newslist"> <ul> <li><a href="#" target="_blank">科海期刊办公自动化系统《投稿须知》</a></li> <li><a href="#" target="_blank">版权转让协议</a></li> </ul> </div> </td> </tr> </table> <br /> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" class="hover">稿签</li> <li id="two2" onclick="setTab('two',2,4)" >内容</li> <li id="two3" onclick="setTab('two',3,4)">作者信息</li> <li id="two4" onclick="setTab('two',4,4)">稿件状态</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" ><table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabcss"> <tr> <td width="80" align="center">中文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">作&nbsp;&nbsp;&nbsp;&nbsp;者</td> <td>&nbsp;</td> </tr> <tr> <td align="center">关&nbsp;键&nbsp;词</td> <td>&nbsp;</td> </tr> <tr> <td align="center">中文摘要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文搞要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">回避专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">推荐专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">专业类型</td> <td>&nbsp;</td> </tr> </table> </div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> <br /> <div class="tit" ><img src="../images/045631590.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;已提交的稿件 </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablist"> <tr> <th>序号</th> <th>文&nbsp;&nbsp;&nbsp;&nbsp;题 </th> <th>投稿日期</th> <th>稿件状态</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html> [/code] 这是右侧代码。就是显示夜明那个 我的页面没有其他东西,因为其他只是一个静态没有动态代码使用,贴出来也没有多大帮助呀,[code="java"] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="../images/s.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="tit" ><img src="../images/045631213.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;用户名:<a href='/magazineOA/login/details.action'> </a> </div> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableborder"> <tr> <td><div class="tit_tab">通知公告</div></td> </tr> <tr> <td> <div class="newslist"> <ul> <li><a href="#" target="_blank">科海期刊办公自动化系统《投稿须知》</a></li> <li><a href="#" target="_blank">版权转让协议</a></li> </ul> </div> </td> </tr> </table> <br /> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" class="hover">稿签</li> <li id="two2" onclick="setTab('two',2,4)" >内容</li> <li id="two3" onclick="setTab('two',3,4)">作者信息</li> <li id="two4" onclick="setTab('two',4,4)">稿件状态</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" ><table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabcss"> <tr> <td width="80" align="center">中文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文文题</td> <td>&nbsp;</td> </tr> <tr> <td align="center">作&nbsp;&nbsp;&nbsp;&nbsp;者</td> <td>&nbsp;</td> </tr> <tr> <td align="center">关&nbsp;键&nbsp;词</td> <td>&nbsp;</td> </tr> <tr> <td align="center">中文摘要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">英文搞要</td> <td>&nbsp;</td> </tr> <tr> <td align="center">回避专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">推荐专家</td> <td>&nbsp;</td> </tr> <tr> <td align="center">专业类型</td> <td>&nbsp;</td> </tr> </table> </div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> <br /> <div class="tit" ><img src="../images/045631590.gif" width="16" height="16" vspace="5" align="left" /> &nbsp;已提交的稿件 </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablist"> <tr> <th>序号</th> <th>文&nbsp;&nbsp;&nbsp;&nbsp;题 </th> <th>投稿日期</th> <th>稿件状态</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html> [/code] 这是一个输出后查看源代码显示的 还有就是我action的代码 [code="java"]public String countMessagAuthor()throws Exception{ Map<String, Integer> session = ActionContext.getContext().getSession(); Message messag = new Message(); int count; lastreadTime = messag.getLastreadTime(); if(lastreadTime != "未读") { lastreadTime ="未读"; receiveName = id; messag.setLastreadTime(lastreadTime); messag.setSendflag(sendflag); messag.setReceiveName(receiveName); messag.setReceiveflag("0"); List<Message> list = messageService.findByExample(messag); count = list.size(); session.put("count", count); } else { count = 0; session.put("count", count); } return SUCCESS; }[/code] [b]问题补充:[/b] 整个流程很简单的,就是我登陆要调用loginAction action里的方法并且把register用session保存起来,如果我登陆成功后转到执行这个countMessagAuthor方法,进行一些业务操作后跳转我要显示的页面,第一次显示时可以的但是我刷新页面后那个本来该显示session值消息啦 我有三块显示frame,我用的是用spring来管理struts2 的action [b]问题补充:[/b] 不管那个,都是一样的结果。左边,右边,还是整个页面都是这样的。 [b]问题补充:[/b] [code="java"]public String toLogin() throws Exception { try { Map<String, Register> session=ActionContext.getContext().getSession(); register = authorService.loginValid(userName, passWord); if(register !=null){ session.put("register",register); id = register.getId(); return SUCCESS; }else{ addActionError("用户名/密码不匹配"); this.setTip("<font color='red'>对不起您的帐号或密码有误!</font>"); return "failure"; } } catch (Exception e) { // TODO: handle exception this.setTip("<font color='red'>对不起,系统出现故障,请稍后再登录!</font>"); e.printStackTrace(); return "failure"; } } [/code] 这个和我那个要调用的如果是右面刷新时这个没有啦,至于左边那个没有也是一样的好像

jsp中两个javascript,但是只能成功运行一个,单独都能正常运行。

一些css代码就省略了。两个js,单独都能正常使用,但是放在一起只有第二个js有反应,第一个没反映。 ``` <%@ page language="java" import="java.util.*,pojo.Consume,Dao.ConsumeDao" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>分类汇总</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="./css/doubleDate.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="./js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" language="javascript" src="./js/doubleDate2.0.js" ></script> <script> $(function(){ $('.doubledate').kuiDate({ className:'doubledate', isDisabled: "0" // isDisabled为可选参数,“0”表示今日之前不可选,“1”标志今日之前可选 }); }); </script> <script type="text/javascript" language="javascript" src="./js/jquery-1.10.2.js"></script> <script> function alertWin(Cno) { /* $.ajax({ type:"post", url:"./ShowDetail", data:{Cno:Cno}, success:function(data){ alert("success"); } }); */ var msgw,msgh,titleheight,bordercolor,titlecolor; msgw = 300;//提示窗口的宽度 msgh = 300;//提示窗口的高度 titleheight = 25 //提示窗口标题高度 bordercolor = "#A480B2";//提示窗口的边框颜色 titlecolor = "#A480B2";//提示窗口的标题颜色 //根据自己需求注意宽度和高度的调整 var iWidth = document.documentElement. clientWidth; var iHeight = document.documentElement.clientHeight; //遮罩层 var bgObj = document.createElement("div"); bgObj.setAttribute("id", "bgObj");//设置ID bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); //弹出窗口 var msgObj=document.createElement("div"); msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法,是为div指定属性值 msgObj.setAttribute("align", "center");//为div的align赋值 msgObj.style.background = "white";//背景颜色为白色 msgObj.style.border = "1px solid " + bordercolor;//边框属性,颜色在上面已经赋值 msgObj.style.position = "absolute";//绝对定位 msgObj.style.left = (iWidth-msgw)/2 ;//从左侧开始位置 msgObj.style.top = (iHeight-msgh)/2;//从上部开始位置 msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 msgObj.style.width = msgw + "px";//提示框的宽(上面定义过) msgObj.style.height = msgh + "px";//提示框的高(上面定义过) msgObj.style.textAlign = "center";//文本位置属性,居中。 msgObj.style.lineHeight = "25px";//行间距 msgObj.style.zIndex = "102";//层的z轴位置 document.body.appendChild(msgObj); //弹出窗口标题 var title = document.createElement("div");//创建一个标题对象 title.setAttribute("id", "msgTitle");//为标题对象填加id title.style.margin = "0";//浮动 title.style.padding = "3px";//浮动 title.style.background = titlecolor;//背景颜色 title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity = "0.75";//透明 //title.style.border="1px solid " + bordercolor;//边框 title.style.height = "25px";//高度 title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性 //title.style.color = "red";//文字颜色 title.style.cursor = "move";//鼠标样式 $.ajax({ type:"post", url:"ShowDetail?Cno="+Cno, dataType:"json", success:function(data){ },error:function(){ alert("请求出错"); }}); title.innerHTML="<table border='0' width='100%'><tr><td align='center'>收银小票单</td><td align=\"right\"><a href='#' onclick='closeDiv()'>关闭</a></td></tr><tr><td align='center'>时间:</td></tr><tr><td align='left'>三得利青柠水</td></tr></table>"; msgObj.appendChild(title);//在提示框中增加标题 } //添加关闭功能 function closeDiv() { var msgTitelObject = document.getElementById("msgDiv"); document.body.removeChild(msgTitelObject); var bgObj = document.getElementById("bgObj"); document.body.removeChild(bgObj); } </script> </head> <body> <ul class="iptgroup"> <li>开始日期:</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> <li style="width:20px;"></li> <li>结束日期:</li> <li><input type="text" readonly="readonly" class="doubledate ipticon"/></li> </ul> <form action="FF" method="get" name="myform" id="myform"> <div class="upleft"><img src="image/tu4.gif" width="130" height="130" border="0" /></div> <div class="upright"><br><br><br><center><font face="楷体"color="#000000" size=5><strong>您的消费账单:</strong></font></center></div> <div class="center"> ……………………………………………………………………………… </table> </div> </form> </body> </html> ```

使用js点击实现正序倒序排列

``` <!doctype html> <html> <head> <meta charset="utf-8" /> <meta keywords="JavaScript" /> <meta content="1" /> <title>1</title> <script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script> <style type="text/css"> table, table td, table th { border: none; vertical-align: top; border-collapse: collapse; word-break: break-all; } .MainTable { width: 500px; line-height: 45px; margin: auto; text-align: left; } .MainTable tr { border-bottom:1px solid #E1E1E1; } .MainTable td { padding: 0 10px 0 0; } /*正序排列样式*/ .sort_asc { background:url(images/sorticon.png) 55px 18px no-repeat; cursor:pointer; } /*倒序排列样式*/ .sort_desc { background:url(images/sorticon.png) 55px -18px no-repeat; cursor:pointer; } .list_sort { width: 60px; text-align: center; } </style> </head> <body> <div class="divframe"> <table class="MainTable"> <thead> <tr> <th class="sort_asc list_sort" id="sortID">序号</th> <th>内容</th> </tr> </thead> <tbody id="pageContent"> <tr> <td class="list_sort">1</td> <td>1</td> </tr> <tr> <td class="list_sort">2</td> <td>2</td> </tr> <tr> <td class="list_sort">3</td> <td>3</td> </tr> <tr> <td class="list_sort">4</td> <td>4</td> </tr> <tr> <td class="list_sort">5</td> <td>5</td> </tr> <tr> <td class="list_sort">6</td> <td>6</td> </tr> <tr> <td class="list_sort">7</td> <td>7</td> </tr> </tbody> </table> </div> </body> <script type="text/javascript"> $('#sortID').click(function (){ }) </script> </html> ```

菜鸟JS不会,希望帮忙。。

[b]这段代码只实现了选项卡切换的功能,现在想在第二个按钮上也是就规划工程库上做个2级菜单,然后点击2级菜单在进行窗体的切换。。希望大哥们帮忙指点~[/b] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>井底的蛙</title> <script type="text/javascript"> /* 选项卡封装 by 井底的蛙 2008-2-4 */ opCard = function() { this.bind = new Array(); this.index = 0; //默认显示哪个选项卡,从0开始 this.style = new Array(); //["","",""] this.overStyle = false; //选项是否有over, out变换样式事件,样式为this.style[2] this.overChange = false; //内容是否用over, out直接激活 this.menu = false; //菜单类型 this.nesting = [false,false,"",""]; //是否嵌套,后面2个参数是指定menu,info的子集深度所用id this.auto = [false, 1000]; //自动滚动[true,2000] this.timerID = null; //自动播放的 this.menutimerID = null; //菜单延时的 this.creat = function(func) { var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]); var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]); var my = this, i; var argLen = arguments.length; var arrM = new Array(); if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套 { // 过滤出需要的数据 var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu; var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo; } else { var arrMenu = _arrMenu; var arrInfo = _arrInfo; } var l = arrMenu.length; //if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要,你可以放一个空的在那占位。")} // 修正 if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单,则没有自动运行,有over, out直接激活 // 循环添加各个事件等 for(i=0;i<l;i++) { arrMenu[i].cName = arrMenu[i].className; arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式,菜单的话统一样式 if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器 { if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } arrMenu[i].onclick = function(){if(argLen==1){func()}} arrInfo[i].style.display = "none"; continue; } if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化,菜单的话全部隐藏 arrMenu[i].index = i; //记录自己激活值[序号] arrInfo[i].index = i; if(this.overChange) //有鼠标over, out事件 { arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);} } else //onclick触发 { arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}} if(this.overStyle) // 有over, out 改变样式 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } else // 没有over, out 改变样式 { if(this.auto[0]) // 有自动运行 { arrMenu[i].onmouseover = function(){autoStop(this, 0);} arrMenu[i].onmouseout = function(){autoStop(this, 1);} } } } if(this.auto[0] || this.menu) //arrinfo 控制自动播放 { arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);} arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);} } } //for结束 if(this.auto[0]) { this.timerID = setTimeout(autoMove,this.auto[1]) } // 自动播放 function autoMove() { var n; n = my.index + 1; if(n==l){n=0}; while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器 { n += 1; if(n==l){n=0}; } changeOption(arrMenu[n]); my.timerID = setTimeout(autoMove,my.auto[1]); } // onmouseover时,自动播放停止。num:0为over,1为out。 obj暂时无用。 -_-!! function autoStop(obj, num) { if(!my.auto[0]){return;} //if(obj.index==my.index) num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]); } // 改变选项卡 function changeOption(obj) { arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容 arrInfo[my.index].style.display = "none"; //隐藏旧内容 obj.className = getClass(obj,my.style[1]); //修改为新样式 arrInfo[obj.index].style.display = ""; //显示新内容 my.index = obj.index; //更新当前选择的index } /* 只有onclick时,overStyle的onmouseover,onmouseout事件。用来预激活 obj:目标对象。 num:1为over,0为out */ function changeTitle(obj, num) { if(!my.overStyle){return;}; if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])} } /* 菜单类型时用 obj:目标对象。 num:1为over,0为out */ function changeMenu(num) { if(!my.menu){return;} num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) } //关闭菜单 function menuClose() { arrInfo[my.index].style.display = "none"; arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); } // 得到className(防止将原有样式覆盖) function getClass(o, s) { if(o.cName==""){return s} else{return o.cName + " " + s} } //嵌套情况下得到真正的子集 function getChilds(arrObj, id, num) { var depth = 0; var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集 do //计算深度 { if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1} firstObj = firstObj.parentNode; } while(firstObj.tagName.toLowerCase()!="body") // body强制退出。 var t; var arr = new Array(); for(i=0;i<arrObj.length;i++) //过滤出需要的数据 { t = arrObj[i], d = 0; do { if(t.parentNode.getAttribute("id")==id && d == depth) { arr.push(arrObj[i]);break; //得到数据 } else { if(d==depth){break};d+=1; } t = t.parentNode; } while(t.tagName.toLowerCase()!="body") // body强制退出 } return arr; } } } window.onload = function() { // 默认的onclick中,第一个例子 var bba = new opCard(); bba.bind = ["a2","li","b2","div","c2","div"]; bba.style = ["style1","style2","style3"]; bba.overStyle = true; bba.creat(); bba = null; //菜单导航例子 var gg = new opCard(); gg.bind = ["a8","li","b8","div"]; gg.style = ["style1","style2","style3"]; gg.overStyle = true; gg.menu = true; gg.creat(); gg = null; } </script> <style type="text/css"> body{font-size:12px; font-family:Verdana,"宋体";} p,ul{margin:0px; padding:0px;} td,div{font-size:12px} .a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;} .a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;} .test{text-decoration:underline;} #b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;} #b1 div.s strong{color:#0066FF;} /* */ .style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} #a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;} #b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;} #b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;} #b8 div a{margin-right:20px;} .style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;} </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="b1" valign="top"> <div class="s"> <!--默认的onclick中,第一个例子--> <div id="a2" style="width: 297px"> <ul> <li>规划报告</li> <li>规划工程库</li> <li>工程专题</li></ul> </div> <div id="b2"> <div style="width: 1080px; height: 412px;"> 456 </div> <div style="width: 1080px; height: 412px;"> var bba = new opCard();<br> bba.bind = ["a2","li","b2","div"];<br> bba.style = ["style1","style2","style1"];<br> bba.overStyle = true;<br> bba.creat();<br> bba = null; </div> <div style="width: 1080px; height: 412px;">33333</div> </div> </div> </td> </tr> </table> </body> </html>

在ie 7或ie 6里如何让超出td宽度的内容浮动显示在后面的td里

<pre name="code" class="html">&lt;html&gt; &lt;body style="font:16px Arial;"&gt; &lt;style type="text/css"&gt; .table { border-collapse: collapse; table-layout: fixed; font: normal 11px arial; } .row { height:25px; } .cell { background-color:#ECF4FE; font-family:Arial,Verdana,sans-serif; font-size: 11px; border-bottom-width: 1px; border-bottom-color: #ECF4FE; border-bottom-style: dotted; border-top: none; border-left: 1px solid #EC0000; border-right: 1px solid #EC0000; vertical-align: middle; padding-left: 3px; padding-right: 3px; } &lt;/style&gt; &lt;div style="width: 250px"&gt; &lt;table width="100%" class="table"&gt; &lt;tr class="row"&gt; &lt;td class="cell"&gt; &lt;div style="white-space:nowrap;"&gt;Text Text Text Text Text Text Text Text&lt;/div&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;td class="cell"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p> </p> <p> 如题和上述代码,在ie7标准模式下。</p> <p> </p> <p><span style="font-size: small;">情形一:</span></p> <p><span style="white-space: pre;"> </span>如果表格上面有 <span style="white-space: pre; background-color: #fafafa;">table-layout: fixed; 这个样式,上述代码在页面上显示的效果是</span></p> <p><img src="/problems/C:%5CDocuments%20and%20Settings%5Cfelix_li%5CDesktop" alt=""></p> <p><img src="http://dl.iteye.com/upload/attachment/561033/18d689de-63e4-3dcd-a322-b933f5cff09c.jpg" alt=""></p> <div><br></div> <div> <p><span style="font-size: small;">情形二:</span></p> <p><span style="white-space: pre;"> </span>如果表格上面没有 <span style="white-space: pre; background-color: #fafafa;">table-layout: fixed; 这个样式,上述代码在页面上显示的效果是</span></p> <p><br><img src="http://dl.iteye.com/upload/attachment/561035/758bb8fa-f43a-3042-a532-5ca2ddefe925.jpg" alt=""><br> 很显然这两种结果都不理想。</p> <p>在我现在的需求里,限于总体设计的因素,table标签上的<span style="white-space: pre; background-color: #fafafa;">table-layout: fixed;</span> 是必须要有的。但是我又需要把单元格里超出单元格的那些内容浮动显示在它后面的各个单元格里,不能像情形二里那样直接把第一个单元格拉宽。理想效果如下</p> <p><br><img src="http://dl.iteye.com/upload/attachment/561037/27865694-4a5c-3b07-ace2-301a9bc9e1ce.jpg" alt=""><br> 上面的理想效果目前在IE 8,Firefox,Chrome,Safari,Opera这几款浏览器里都实现了,就差ie 7,也许还有ie 6。</p> <p><span><br></span></p> <p><span>忘好心人指点。</span></p> </div>

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

Vue + Spring Boot 项目实战(十九):Web 项目优化解决方案

快来一起探索如何打脸我们的破项目,兄弟姐妹们把害怕打在公屏上!

你连存活到JDK8中著名的Bug都不知道,我怎么敢给你加薪

CopyOnWriteArrayList.java和ArrayList.java,这2个类的构造函数,注释中有一句话 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 public ArrayList(Collection&lt;? ...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

CSDN:因博主近期注重写专栏文章(已超过150篇),订阅博主专栏人数在突增,近期很有可能提高专栏价格(已订阅的不受影响),提前声明,敬请理解!

CSDN:因博主近期注重写专栏文章(已超过150篇),订阅博主专栏人数在突增,近期很有可能提高专栏价格(已订阅的不受影响),提前声明,敬请理解! 目录 博客声明 大数据了解博主粉丝 博主的粉丝群体画像 粉丝群体性别比例、年龄分布 粉丝群体学历分布、职业分布、行业分布 国内、国外粉丝群体地域分布 博主的近期访问每日增量、粉丝每日增量 博客声明 因近期博主写专栏的文章越来越多,也越来越精细,逐步优化文章。因此,最近一段时间,订阅博主专栏的人数增长也非常快,并且专栏价

一个HashMap跟面试官扯了半个小时

一个HashMap能跟面试官扯上半个小时 关注 安琪拉的博客 1.回复面试领取面试资料 2.回复书籍领取技术电子书 3.回复交流领取技术电子书 前言 HashMap应该算是Java后端工程师面试的必问题,因为其中的知识点太多,很适合用来考察面试者的Java基础。 开场 面试官: 你先自我介绍一下吧! 安琪拉: 我是安琪拉,草丛三婊之一,最强中单(钟馗不服)!哦,不对,串场了,我是**,目...

我说我不会算法,阿里把我挂了。

不说了,字节跳动也反手把我挂了。

记录下入职中软一个月(外包华为)

我在年前从上一家公司离职,没想到过年期间疫情爆发,我也被困在家里,在家呆着的日子让人很焦躁,于是我疯狂的投简历,看面试题,希望可以进大公司去看看。 我也有幸面试了我觉得还挺大的公司的(虽然不是bat之类的大厂,但是作为一名二本计算机专业刚毕业的大学生bat那些大厂我连投简历的勇气都没有),最后选择了中软,我知道这是一家外包公司,待遇各方面甚至不如我的上一家公司,但是对我而言这可是外包华为,能...

面试:第十六章:Java中级开发

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

培训班出来的人后来都怎么样了?(二)

接着上回说,培训班学习生涯结束了。后面每天就是无休止的背面试题,不是没有头脑的背,培训公司还是有方法的,现在回想当时背的面试题好像都用上了,也被问到了。回头找找面试题,当时都是打印下来天天看,天天背。 不理解呢也要背,面试造飞机,上班拧螺丝。班里的同学开始四处投简历面试了,很快就有面试成功的,刚开始一个,然后越来越多。不知道是什么原因,尝到胜利果实的童鞋,不满足于自己通过的公司,嫌薪水要少了,选择...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

工作八年,月薪60K,裸辞两个月,投简历投到怀疑人生!

近日,有网友在某职场社交平台吐槽,自己裸辞两个月了,但是找工作却让自己的心态都要崩溃了,全部无果,不是已查看无回音,就是已查看不符合。 “工作八年,两年一跳,裸辞两个月了,之前月薪60K,最近找工作找的心态崩了!所有招聘工具都用了,全部无果,不是已查看无回音,就是已查看不符合。进头条,滴滴之类的大厂很难吗???!!!投简历投的开始怀疑人生了!希望 可以收到大厂offer” 先来看看网...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

97年世界黑客编程大赛冠军作品(大小仅为16KB),惊艳世界的编程巨作

这是世界编程大赛第一名作品(97年Mekka ’97 4K Intro比赛)汇编语言所写。 整个文件只有4095个字节, 大小仅仅为16KB! 不仅实现了3D动画的效果!还有一段震撼人心的背景音乐!!! 内容无法以言语形容,实在太强大! 下面是代码,具体操作看最后! @echo off more +1 %~s0|debug e100 33 f6 bf 0 20 b5 10 f3 a5...

程序员是做全栈工程师好?还是专注一个领域好?

昨天,有位大一的同学私信我,说他要做全栈工程师。 我一听,这不害了孩子么,必须制止啊。 谁知,讲到最后,更确定了他做全栈程序员的梦想。 但凡做全栈工程师的,要么很惨,要么很牛! 但凡很牛的,绝不是一开始就是做全栈的! 全栈工程师听起来好听,但绝没有你想象的那么简单。 今天听我来给你唠,记得帮我点赞哦。 一、全栈工程师的职责 如果你学习编程的目的只是玩玩,那随意,想怎么学怎么学。...

不要再到处使用 === 了

我们知道现在的开发人员都使用 === 来代替 ==,为什么呢?我在网上看到的大多数教程都认为,要预测 JavaScript 强制转换是如何工作这太复杂了,因此建议总是使用===。这些都...

什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站?00后的世界我不懂!

A站 AcFun弹幕视频网,简称“A站”,成立于2007年6月,取意于Anime Comic Fun,是中国大陆第一家弹幕视频网站。A站以视频为载体,逐步发展出基于原生内容二次创作的完整生态,拥有高质量互动弹幕,是中国弹幕文化的发源地;拥有大量超粘性的用户群体,产生输出了金坷垃、鬼畜全明星、我的滑板鞋、小苹果等大量网络流行文化,也是中国二次元文化的发源地。 B站 全称“哔哩哔哩(bilibili...

十个摸鱼,哦,不对,是炫酷(可以玩一整天)的网站!!!

文章目录前言正文**1、Kaspersky Cyberthreat real-time map****2、Finding Home****3、Silk – Interactive Generative Art****4、Liquid Particles 3D****5、WINDOWS93****6、Staggering Beauty****7、Ostagram图片生成器网址****8、全历史网址*...

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

用了这个 IDE 插件,5分钟解决前后端联调!

点击上方蓝色“程序猿DD”,选择“设为星标”回复“资源”获取独家整理的学习资料!作者 |李海庆我是一个 Web 开发前端工程师,受到疫情影响,今天是我在家办公的第78天。开发了两周,...

大厂的 404 页面都长啥样?最后一个笑了...

每天浏览各大网站,难免会碰到404页面啊。你注意过404页面么?猿妹搜罗来了下面这些知名网站的404页面,以供大家欣赏,看看哪个网站更有创意: 正在上传…重新上传取消 腾讯 正在上传…重新上传取消 网易 淘宝 百度 新浪微博 正在上传…重新上传取消 新浪 京东 优酷 腾讯视频 搜...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

Java14 新特性解读

Java14 已于 2020 年 3 月 17 号发布,官方特性解读在这里:https://openjdk.java.net/projects/jdk/14/以下是个人对于特性的中文式...

前端还能这么玩?(女朋友生日,用前端写了一个好玩的送给了她,高兴坏了)

前端还能这么玩?(女朋友生日,用前端写了一个好玩的送给了她,高兴坏了)

爬虫(101)爬点重口味的

小弟最近在学校无聊的很哪,浏览网页突然看到一张图片,都快流鼻血。。。然后小弟冥思苦想,得干一点有趣的事情python 爬虫库安装https://s.taobao.com/api?_ks...

工作两年简历写成这样,谁要你呀!

作者:小傅哥 博客:https://bugstack.cn 沉淀、分享、成长,让自己和他人都能有所收获! 一、前言 最近有伙伴问小傅哥,我的简历怎么投递了都没有反应,心里慌的很呀。 工作两年了目前的公司没有什么大项目,整天的维护别人的代码,有坑也不让重构,都烦死了。荒废我一身技能无处施展,投递的简历也没人看。我是不动物园里的猩猩,狒狒了! 我要加班,我要996,我要疯狂编码,求给我个机会… ...

正点原子:STM32F103(战舰)、STM32F407(探索者)、STM32F103(MINI)原理图和PCB

正点原子:STM32F103(战舰)、STM32F407(探索者)、STM32F103(MINI)原理图和PCB

讲真,这两款idea插件,能治愈你英语不好的病

时不时就有小伙伴问我,“二哥,能推荐一款 IDE 吗?”你看这话问的,现在搞 Java 的不都在用 Intellij IDEA 吗,还用得着推荐(我已经和 Eclipse 分手了)。然后小伙伴又说,“二哥,IDEA 支持中文吗?我英语不太好。”你看这话问的,搞编程的,英语不好是硬伤啊! 不过,随着 IDEA 最新版(版本号是 2020.1)的发布,英语不好的病可以彻底治愈了。为什么这么说呢?因为 ...

相关热词 c#跨线程停止timer c#批量写入sql数据库 c# 自动安装浏览器 c#语言基础考试题 c# 偏移量打印是什么 c# 绘制曲线图 c#框体中的退出函数 c# 按钮透明背景 c# idl 混编出错 c#在位置0处没有任何行
立即提问