問(wèn)題描述

比如外部別的頁(yè)面有幾個(gè)鏈接：a b c d e然后點(diǎn)擊后的跳轉(zhuǎn)詳情頁(yè)面里，abcde五個(gè)模塊都在這一個(gè)頁(yè)面里,默認(rèn)顯示第一個(gè)a,其他都是display:none;

能否在外部頁(yè)面點(diǎn)擊b鏈接的時(shí)候,跳轉(zhuǎn)過(guò)來(lái)到詳情頁(yè),直接顯示b內(nèi)容,除了b內(nèi)容外其他內(nèi)容都是display:none,在外部頁(yè)面點(diǎn)擊c鏈接的時(shí)候,跳轉(zhuǎn)過(guò)來(lái)到詳情頁(yè),直接顯示c內(nèi)容,除了c內(nèi)容外其他內(nèi)容都是display:none,

外部頁(yè)面：

<a href='http://www.aoyou183.cn/wenda/1.html'>a</a><a href='http://www.aoyou183.cn/wenda/1.html'>b</a><a href='http://www.aoyou183.cn/wenda/1.html'>c</a><a href='http://www.aoyou183.cn/wenda/1.html'>d</a><a href='http://www.aoyou183.cn/wenda/1.html'>e</a>

跳轉(zhuǎn)后1.html的頁(yè)面：

<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的內(nèi)容</p> <p style='display:none;'>b的內(nèi)容</p> <p style='display:none;'>c的內(nèi)容</p> <p style='display:none;'>d的內(nèi)容</p> <p style='display:none;'>e的內(nèi)容</p></p><script> $(’.uls li’).on(’click’,function(){var aIndex = $(this).index();$(’.con p’).css({’display’:’none’});$(’.con’).eq(aIndex).css({’display’:’block’}); })</script>

問(wèn)題解答

在五個(gè)鏈接中都加入一個(gè)參數(shù)，例如

<a href='http://www.aoyou183.cn/wenda/1.html#a'>a</a><a href='http://www.aoyou183.cn/wenda/1.html#b'>b</a><a href='http://www.aoyou183.cn/wenda/1.html#c'>c</a><a href='http://www.aoyou183.cn/wenda/1.html#d'>d</a><a href='http://www.aoyou183.cn/wenda/1.html#e'>e</a>

然后在這個(gè)頁(yè)面的 js 里面判斷 url 后面的參數(shù)，來(lái)決定哪個(gè)顯示哪個(gè)隱藏。window.location.hash 能夠獲取到 url 的參數(shù)。

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

就用上面的方法來(lái)判斷是從哪個(gè)鏈接點(diǎn)過(guò)來(lái)的，就能顯示相應(yīng)的塊。

用錨點(diǎn)實(shí)現(xiàn)就好了

// 外部頁(yè)面：<a href='http://www.aoyou183.cn/wenda/1.html#a'>a</a><a href='http://www.aoyou183.cn/wenda/1.html#b'>b</a><a href='http://www.aoyou183.cn/wenda/1.html#c'>c</a><a href='http://www.aoyou183.cn/wenda/1.html#d'>d</a><a href='http://www.aoyou183.cn/wenda/1.html#e'>e</a>跳轉(zhuǎn)后1.html的頁(yè)面：<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的內(nèi)容</p> <p style='display:none;'>b的內(nèi)容</p> <p style='display:none;'>c的內(nèi)容</p> <p style='display:none;'>d的內(nèi)容</p> <p style='display:none;'>e的內(nèi)容</p></p>回答3：

我覺(jué)得你對(duì) HTML 簡(jiǎn)單了解一下，然后著手學(xué)習(xí)目前比較流行的前端開(kāi)發(fā)吧，如：(Vue.js)[https://cn.vuejs.org/]、(React.js)[http://react-china.org/]、(AngularJS)[https://angularjs.org/]等。因?yàn)橄衲阏f(shuō)的這種交互，除了使用常規(guī)的動(dòng)態(tài)編程語(yǔ)言(如：PHP、Java等)，前端實(shí)現(xiàn)起來(lái)還是比較麻煩的。深了就不多說(shuō)了，你可以參考我以前回答的一個(gè)問(wèn)題：/q/10...。他的需求和你說(shuō)的很像，只是一個(gè)傳遞 username，一個(gè)傳遞 index;大概代碼如下：這里是有錨點(diǎn)作為參數(shù)傳遞：

<a href='http://www.aoyou183.cn/wenda/1.html#1'>a</a><a href='http://www.aoyou183.cn/wenda/1.html#2'>b</a>

1.html 獲取傳入的錨點(diǎn)信息

<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();; // 修正參數(shù) - W.L.hash 獲取的是 `#string` 的格式，我們只需要 # 后面的內(nèi)容 useIndex = useIndex ? parseInt(useIndex.substr(1)) : 0;// 初始化自動(dòng)顯示 flip( useIndex );// 手動(dòng)切換 tabNavItem.on(’click.app’,function(e){flip( $(this).index() ); })// 切換方法 function flip(index){// 全部移除選中 - 選擇當(dāng)前索引的條目 - 添加選中$tabNavItem.removeClass(tabNavItemActive).eq(index).addClass(tabNavItemActive);// 隱藏已顯示條目 - 選擇當(dāng)前索引他條目 - 顯示$tabContItem.hide().eq(index).show(); } });</script>