javascript - 如何在外部点击,跳转到网页后,显示指定的模块。

问题描述

比如外部别的页面有几个链接：a b c d e然后点击后的跳转详情页面里，abcde五个模块都在这一个页面里,默认显示第一个a,其他都是display:none;

能否在外部页面点击b链接的时候,跳转过来到详情页,直接显示b内容,除了b内容外其他内容都是display:none,在外部页面点击c链接的时候,跳转过来到详情页,直接显示c内容,除了c内容外其他内容都是display:none,

外部页面：

<a href='https://www.haobala.com/wenda/1.html'>a</a><a href='https://www.haobala.com/wenda/1.html'>b</a><a href='https://www.haobala.com/wenda/1.html'>c</a><a href='https://www.haobala.com/wenda/1.html'>d</a><a href='https://www.haobala.com/wenda/1.html'>e</a>

跳转后1.html的页面：

<ul class='uls'> <li class='uls_li_checked'>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul><p class='con'> <p>a的内容</p> <p style='display:none;'>b的内容</p> <p style='display:none;'>c的内容</p> <p style='display:none;'>d的内容</p> <p style='display:none;'>e的内容</p></p><script> $(’.uls li’).on(’click’,function(){var aIndex = $(this).index();$(’.con p’).css({’display’:’none’});$(’.con’).eq(aIndex).css({’display’:’block’}); })</script>

问题解答

在五个链接中都加入一个参数，例如

<a href='https://www.haobala.com/wenda/1.html#a'>a</a><a href='https://www.haobala.com/wenda/1.html#b'>b</a><a href='https://www.haobala.com/wenda/1.html#c'>c</a><a href='https://www.haobala.com/wenda/1.html#d'>d</a><a href='https://www.haobala.com/wenda/1.html#e'>e</a>

然后在这个页面的 js 里面判断 url 后面的参数，来决定哪个显示哪个隐藏。window.location.hash 能够获取到 url 的参数。

if (window.location.hash==='#a'){ //a 显示，其他隐藏}

就用上面的方法来判断是从哪个链接点过来的，就能显示相应的块。

用锚点实现就好了

// 外部页面：<a href='https://www.haobala.com/wenda/1.html#a'>a</a><a href='https://www.haobala.com/wenda/1.html#b'>b</a><a href='https://www.haobala.com/wenda/1.html#c'>c</a><a href='https://www.haobala.com/wenda/1.html#d'>d</a><a href='https://www.haobala.com/wenda/1.html#e'>e</a>跳转后1.html的页面：<ul class='uls'> <li class='uls_li_checked'>a</li> <li id='b'>b</li> <li id='c'>c</li> <li id='d'>d</li> <li id='e'>e</li></ul><p class='con'> <p>a的内容</p> <p style='display:none;'>b的内容</p> <p style='display:none;'>c的内容</p> <p style='display:none;'>d的内容</p> <p style='display:none;'>e的内容</p></p>回答3：

我觉得你对 HTML 简单了解一下，然后着手学习目前比较流行的前端开发吧，如：(Vue.js)[https://cn.vuejs.org/]、(React.js)[http://react-china.org/]、(AngularJS)[https://angularjs.org/]等。因为像你说的这种交互，除了使用常规的动态编程语言(如：PHP、Java等)，前端实现起来还是比较麻烦的。深了就不多说了，你可以参考我以前回答的一个问题：/q/10...。他的需求和你说的很像，只是一个传递 username，一个传递 index;大概代码如下：这里是有锚点作为参数传递：

<a href='https://www.haobala.com/wenda/1.html#1'>a</a><a href='https://www.haobala.com/wenda/1.html#2'>b</a>

1.html 获取传入的锚点信息

<script type='test/javascript'>// $(function(){ ··· }) 等于 $(document).ready();$(function(){ ’use strict’;// 初始化变量 var useIndex = window.location.hash, // String:’#N’,$tabNavItem = $(’.uls > li’),tabNavItemActive = ’uls_li_checked’,$tabContItem = $(’.con’).children();; // 修正参数 - W.L.hash 获取的是 `#string` 的格式，我们只需要 # 后面的内容 useIndex = useIndex ? parseInt(useIndex.substr(1)) : 0;// 初始化自动显示 flip( useIndex );// 手动切换 tabNavItem.on(’click.app’,function(e){flip( $(this).index() ); })// 切换方法 function flip(index){// 全部移除选中 - 选择当前索引的条目 - 添加选中$tabNavItem.removeClass(tabNavItemActive).eq(index).addClass(tabNavItemActive);// 隐藏已显示条目 - 选择当前索引他条目 - 显示$tabContItem.hide().eq(index).show(); } });</script>