页面跳转选中对应的导航

最新推荐文章于 2021-12-05 19:40:42 发布
最新推荐文章于 2021-12-05 19:40:42 发布
阅读量471 收藏 2
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/hfxm/p/8005369.html
版权

前端在做一个网站的时候，通常会有不同的导航，点击跳转到对应的页面上，这时候就需要给对应页面的导航加一个选中状态，如图：

这是一个有首页，seo优化，娱乐，三个页面组成的一个导航。

实现方式，利用location.href获取当前路径，对它和当前的<a href="a.html"</a> href的值进行对比，把当前的页面的导航选中。

 

<body>
        <ul class="menu" id="menu">  
        <li><a href="a.html">首页</a></li>  
        <li><a href="b.html">SEO优化</a></li>  
        <li><a href="c.html">生活娱乐</a></li>  
        </ul>  
        <p>aaaaaaa</p> 
    </body> 
        <script>
            var urlstr = location.href; 
            var urlstatus = false;
            $("#menu a").each(function() {
              if((urlstr + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href')!="") {  
                    $(this).addClass('cur'); 
                    urlstatus = true;
                }
                else {
                    $(this).removeClass('cur');
                }
            });
            if (!urlstatus) {
                $("#menu a").eq(0).addClass('cur');
            }
    </script>

 

转载于:https://www.cnblogs.com/hfxm/p/8005369.html

weixin_34252090
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
11-29
本文将探讨如何使用JavaScript（配合JQuery库）实现这种效果，特别是在页面跳转后仍然保持菜单选中状态。 一、概述 多级菜单中当前菜单不随页面跳转样式变化的关键在于，无论用户点击哪个子菜单，相应的菜单项及其...
导航跳转后保持选中状态 jquery高亮当前选中菜单
YUSIR 完美CODING世界
03-15 2万+
功能需求： 今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后，高亮当前菜单样式。 简单的说，就是我点击导航菜单中的一个栏目，跳转到该栏目下，该栏目菜单也同时高亮（可以是背景色也可以是背景图片） 解决方法： 通过查看实例，我们需要用到JS中的jquery来实现这种效果，也可以通过CSS设置不同页面的a:hover实现效果，不过这显然是比较笨拙的方法。 那么，如何用JS来实现效果
如果所有页面引用同一个头部导航菜单，点击栏目后，页面跳转的对应页面，这时导航菜单中该栏目高亮显示
qq_38791687的博客
05-29 2526
导航栏菜单html结构： <ul id="tabs_nav"> <li><a href="a.html" class="active"></a></li> <li><a href="b.html"></a></li> <li><a href="c...
一个页面跳转到另一个页面的导航的对应的标签下面
chenlxhf的博客
11-26 1万+
首先，在这里将问题仔细的描述一下：一般网页上都有导航条，导航条里面某个标签又有一个列表，如下图1所示： 当进行页面间的跳转是，希望直接跳转到相对于的标签所对应的内容下面。而且简介标签下面对应的标签也是一个导航条，而且具有tab卡片切换效果，当页面进行跳转是直接定位到相应的内容。当点击了“成员介绍”标签后，效果如下图2： 会直接定位到“成员介绍”标签的切换效果下。
Jquery跳转页面后的导航栏添加选中后样式
林中明月间丶
05-17 3525
<!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> <met...
让跳转新页面的栏目成为选中状态()
幸福有多远
03-16 1089
var url = location.href; $("ul li a").each(function() { if((url + '/').indexOf($(this).attr('href')) &gt; -1 &amp;&amp; $(this).attr('href') != "") { $(this).parents().addClass("act"); //让跳转新页面...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
2. **`router`属性**：当设置为`true`时，`el-menu-item`和`el-submenu`可以通过`index`属性作为路由进行页面跳转。这样，当用户点击菜单项时，Vue Router会处理对应的路由变化。 3. **`unique-opened`属性**：如果...
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
常用导航选中效果
09-06
常用导航效果 根据所选页面选中对应标签，跳转页面正常使用，常用导航效果 根据所选页面选中对应标签，跳转页面正常使用常用导航效果 根据所选页面选中对应标签，跳转页面正常使用常用导航效果 根据所选页面选中对应...
winform界面跳转
02-12
在实现界面跳转时，我们需要创建多个窗体（Form），每个窗体代表一个独立的页面。使用Visual Studio的Designer工具，可以直观地拖放控件并布局，构建出美观且易用的界面。对于“Table页面”效果，可以考虑使用...
vue-element-admin跳转路由,菜单栏选中
summer鸿的博客
04-07 2946
在这里插入图片描述
Bootstrap导航栏选中状态动态改变、设置Bootstrap导航栏的动态选中
baoyu_G的博客
02-04 1万+
自己做一个Bootstrap前端页面,发现如果把导航栏某一栏的&lt;li&gt;标签的class设置成avtive的话，每次点击其他的导航链接都是那个设置的链接为选中状态。为了解决这个问题，在网上看到了类似这样的做法： 思路是获取页面的元素，将原来的active移除，将被点击的&lt;li&gt;标签添加上class属性； 这种方式并没有奏效。 因为页面导航栏的&lt;a&gt;标签有hr......
radio单选按钮选中时当前页面实现跳转
maple_fix的博客
07-13 8654
例如下面是一个三个三选span片段： 总体概况 利用统计  地区统计   当改变checked属性时在当前页面实现跳转js实现如下： $('input[type=radio][name=chart]').change(function() {        if (this.value == 'overAll') {            window.location.hre
vue和element框架搭配实现导航条跳转，点击按钮跳转页面导航条也跟着变换
热门推荐
搁浅_9527
09-23 3万+
首先，第一步，将element框架组件中选择 你想要的导航条类型 将其代码复制下来，js也复制，样式可以自己改 第二部，要想实现跳转就要用到router，在element框架中Menu Attribute中给了我们一个专门跳转的参数 router ，写进去就行了 以下是我的写法HTML部分<!--:default-active当前激活菜单的 index --> <el-m
layui导航栏不跳转切换内容_UI设计知识系列 四、界面中的“导航布局”
weixin_39883462的博客
12-01 1517
导航布局，是UI设计时需要重点考虑的部分。一款App的导航可以被设计成多种形式的，导航设计的合理与否,直接关系到用户能否根据自己过去的生活习惯和直觉，不假思索地去使用APP,并且完成用户想要完成的任务。 一款产品从初期架构到上线会经历无数次的改版。有可能是因为商业模式的改变，也可能是产品本身的架构不能满足业务需求…… 产品在不断的迭代和更新。每进行一次结构上的调成，成本都...
设置导航栏选中状态
Bronna的博客
07-19 4235
设置导航栏选中状态的笨方法 由于我的导航栏是一个全局页面，其他页面都是引入这个页面的，因此不能用普通的<li class="active"></li>来设置选中状态 最后想到一个笨方法1.jsp页面<li class="${activi1}><a href="AA.action"><i class="fa fa-bars"></i> 总览</a></li> <li class="${activi
Bootstrap treeview 多级树形菜单中 如何实现页面跳转时节点自动选中
PSW_CSDN的博客
12-05 2218
前言: 方向: java - Spring MVC - 前端框架 Bootstrap - Bootstrap treeview 案例目标:处理树状布局中页面跳转选中回显问题; 案例必备小知识: Spring MVC 前端框架:Bootstrap 案例在线: 1.构建Bootstrap框架(树状结构): 1.1:创建菜单实体类: ...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
CAT
04-04 1万+
最近一直在弄页面的事情，对页面方面的知识又巩固了一下。这次的内容如题，大家对代码有疑问或者是有更好的方法欢迎留言！js部分        //标题对象      var title = document.getElementById("title");        //菜单对象      var menu = document.getElementById("menu");        //正...
跳转页面导航选中效果（实时刷新的页面）
leng0920的博客
11-02 2043
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style&gt;     .nav { padding:0; margin:0; list-styl
redux根组件导航栏实现页面点击跳转
最新发布
06-08
要在 Redux 根组件中实现导航栏的页面点击跳转，可以结合 React Router 和 Redux。 首先，安装 React Router 和 React Redux： ```bash npm install react-router-dom react-redux ``` 然后，在根组件中使用 `BrowserRouter` 和 `Provider` 包裹应用内容： ```javascript import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; import store from './store'; function App() { return ( <Provider store={store}> <BrowserRouter> {/* 应用的内容 */} <Routes /> </BrowserRouter> </Provider> ); } ``` 在 Redux 中，我们需要定义一个 Redux action 和 reducer，用来管理导航栏的当前选中项： ```javascript // actions.js export const SELECT_NAV_ITEM = 'SELECT_NAV_ITEM'; export function selectNavItem(item) { return { type: SELECT_NAV_ITEM, payload: item, }; } // reducer.js import { SELECT_NAV_ITEM } from './actions'; const initialState = { selectedNavItem: 'home', }; function rootReducer(state = initialState, action) { switch (action.type) { case SELECT_NAV_ITEM: return { ...state, selectedNavItem: action.payload, }; default: return state; } } export default rootReducer; ``` 在组件中使用 `connect` 函数将 Redux store 中的 `selectedNavItem` 属性映射到组件的 props 中： ```javascript import { connect } from 'react-redux'; function Navbar({ selectedNavItem, selectNavItem }) { const handleItemClick = (item) => { selectNavItem(item); }; return ( <nav> <ul> <li className={selectedNavItem === 'home' ? 'active' : ''}> <a href="#" onClick={() => handleItemClick('home')}> 首页 </a> </li> <li className={selectedNavItem === 'about' ? 'active' : ''}> <a href="#" onClick={() => handleItemClick('about')}> 关于我们 </a> </li> </ul> </nav> ); } const mapStateToProps = (state) => { return { selectedNavItem: state.selectedNavItem, }; }; const mapDispatchToProps = { selectNavItem, }; export default connect(mapStateToProps, mapDispatchToProps)(Navbar); ``` 最后，在 `Routes` 组件中定义路由规则，并根据 `selectedNavItem` 属性渲染对应的页面： ```javascript import { Route, Switch } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; function Routes({ selectedNavItem }) { return ( <Switch> <Route path="/" exact> {/* 渲染首页 */} <Home /> </Route> <Route path="/about"> {/* 渲染关于页面 */} <About /> </Route> {/* 其他页面 */} </Switch> ); } const mapStateToProps = (state) => { return { selectedNavItem: state.selectedNavItem, }; }; export default connect(mapStateToProps)(Routes); ``` 这样，当用户点击导航栏中的某个项时，会触发 Redux action 更新 `selectedNavItem` 属性，导致页面重新渲染并显示对应的页面内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值