div下点击不同的链接,显示不同页面的内容

       在这里重点想说的是这样的一种思想:在一个页面内,通过点击不同的链接,在同一个区域显示不一样的内容。

       方法:在div标签中,根据点击链接时传来的不同的参数,来加载不同的页面

       实例代码讲解: 以点击上传下载文件为例

       1. <div id='main'>
               <a href="?act=">首页</a>||<a href='?act=up'>我要上传</a>||<a href='?act=down'>我要下载</a>
               </div>
               <div id="content">
                    <?php
                         $act = $_GET['act'];
                         switch($act){
                             case 'up':
                                 include 'upload.php';
                                 break;
                             case 'upfile';
                                 include 'upfile_chk.php';
                                 break;
                             case 'down';
                                 include 'downfile.php';
                                 break;
                             case 'downcode';
                                 include 'downcode.php';
                                 break;
                             case 'queryfile';
                                 include 'queryfile.php';
                                 break;
                        
                             default:
                                 include 'pub.php';
                                 break;
                         }
                    ?>
               </div>

          以上的代码实现的效果是:在访问index.php时,显示首页、我要上传、我要下载的链接,并且下面显示出pub.php文件下的内容(首次访问即为default),点击我要上传,在下面出现上传文件域,点击我要下载,在下面显示下载的导航,点击首页显示所有的文件列表。具体的示例图:

注:以上代码的功能都能正常执行,若有需要可留言索取。

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 Vue 中,你可以使用 Vue Router 来实现点击不同位置进入不同页面的功能。 首先,你需要创建一个 Vue Router 实例,并定义每个路由对应的组件。例如,在你的 main.js 文件中可以这样写: ``` import Vue from 'vue' import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' import Contact from './components/Contact.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] const router = new VueRouter({ routes }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上面的代码中,我们引入了 Vue Router 并通过 `Vue.use(VueRouter)` 进行注册。然后,我们定义了三个路由,分别对应 `/`、`/about` 和 `/contact` 路径,并指定了它们对应的组件。 接下来,在你的模板中,你可以使用 `<router-link>` 标签来生成链接,如下所示: ``` <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> <router-view></router-view> </div> </template> ``` 这里我们使用了 `<router-link>` 标签,它会渲染为一个 `<a>` 标签,并自动设置 `href` 属性为对应的路由路径。当用户点击链接时,Vue Router 会自动切换到相应的路由,并显示对应的组件。 最后,你需要在你的组件中实现对应的页面内容,例如: ``` <template> <div> <h1>Home</h1> <p>Welcome to my home page!</p> </div> </template> ``` 这样,当用户点击“Home”链接时,Vue Router 就会显示 Home 组件的内容。同理,当用户点击其它链接时,Vue Router 会自动切换到对应的路由,并显示对应的组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值