网页数据显示条数改变(无序列表仿下拉菜单)

50 篇文章 0 订阅
38 篇文章 1 订阅

index.html

<!--头部要引用bootstrap相关文件哦-->

<style type="text/css">

a{ color:black; text-decoration:none;}
a:hover{ color:#2e2d3d; text-decoration:none;}

#showBox b{ float:left;}

</style>

 <div id="showBox"><b>显示条数:</b>
            <div class="btn-group">
            <button type="button" class="btn btn-default">显示{$num}条</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                 <li><a href="{:U('Examinee/index?num=10')}">10</a></li>
                 <li><a href="{:U('Examinee/index?num=15')}">15</a></li>
                 <li><a href="{:U('Examinee/index?num=20')}">20</a></li>
                 <li><a href="{:U('Examinee/index?num=25')}">25</a></li>
                 <li><a href="{:U('Examinee/index?num=30')}">30</a></li>
            </ul>
          </div>
      </div>      


后台action中(我用的thinkphp)

public function index(){

        if($num=I("num")){ //接收每页显示信息条数
           $num=I("num");                 
        }else{
           $num=10;  //页面一开始只加载10条数据 
        }

        /*以下就是thinkphp的分页查询啦,可以自己看文档哦:),http://document.thinkphp.cn/manual_3_2.html#data_page        

       将文档中显示中这一行的25替换成变量$num就可以使用啦

    $Page       = new \Think\Page($count,25);// 实例化分页类 传入总记录数和每页显示的记录数(25)
    */       

}




         

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一个简单的示例,其包括轮换图、无序列表下拉菜单和学生管理系统的代码。请注意,这只是一个简单的演示,您可以根据您的实际需求进行修改和扩展。 首先是HTML代码: ```html <!DOCTYPE html> <html> <head> <title>网站示例</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="script.js"></script> </head> <body> <header> <div class="slider"> <img src="img/slide1.jpg"> <img src="img/slide2.jpg"> <img src="img/slide3.jpg"> </div> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li> <a href="#">产品</a> <ul> <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> <li><a href="#">产品3</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <h1>学生管理系统</h1> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>002</td> <td>李四</td> <td>女</td> <td>21</td> </tr> <tr> <td>003</td> <td>王五</td> <td>男</td> <td>19</td> </tr> </tbody> </table> </main> </body> </html> ``` 接下来是CSS代码: ```css /* 轮换图样式 */ .slider { width: 100%; height: 400px; position: relative; } .slider img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* 导航菜单样式 */ nav { background-color: #333; color: #fff; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav ul li { flex: 1; text-align: center; padding: 10px; position: relative; } nav ul li:hover { background-color: #666; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; } nav ul ul li { display: block; } nav ul li:hover > ul { display: block; } /* 学生管理系统样式 */ table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f2f2f2; } ``` 最后是jQuery代码: ```javascript $(document).ready(function(){ // 实现轮换图效果 var sliderIndex = 0; var slider = $('.slider img'); slider.eq(sliderIndex).show(); setInterval(function(){ slider.eq(sliderIndex).fadeOut(1000); sliderIndex = (sliderIndex + 1) % slider.length; slider.eq(sliderIndex).fadeIn(1000); }, 5000); }); ``` 以上代码包括了轮换图、无序列表下拉菜单和学生管理系统的示例。您可以根据您的实际需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值