例如外部別的頁面有幾個連結:
a b c d e
然後點擊後的跳轉詳情頁裡,abcde五個模組都在這一個頁面裡,預設顯示第一個a,其他都是display:none;
能否在外部頁面點擊b連結的時候,跳轉過來到詳情頁,直接顯示b內容,除了b內容外其他內容都是display:none,
在外部頁面點擊c鏈接的時候,跳轉過來到詳情頁,直接顯示c內容,除了c內容外其他內容都是display:none,
外部頁面:
<a href="1.html">a</a>
<a href="1.html">b</a>
<a href="1.html">c</a>
<a href="1.html">d</a>
<a href="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>
在五個連結中都加入一個參數,例如
接著在這個頁面的 js 裡面判斷 url 後面的參數,來決定哪一個顯示哪個隱藏。
window.location.hash 能夠取得到 url 的參數。
就用上面的方法來判斷是從哪個連結點過來的,就能顯示對應的區塊。
用錨點實現就好了
我覺得你對HTML 簡單了解一下,然後著手學習目前比較流行的前端開發吧,如:(Vue.js)[https://cn.vuejs.org/]、(React.js)[http:/ /react-china.org/]、(AngularJS)[https://angularjs.org/]等。因為像你說的這種交互,除了使用常規的動態程式語言(如:PHP、Java等),前端實現起來還是比較麻煩的。
深了就不多說了,你可以參考我以前回答的一個問題:/q/10...。他的需求跟你說的很像,只是一個傳遞
username
,一個傳遞index
;大概代碼如下:
這裡是有錨點作為參數傳遞:
1.html 取得傳入的錨點資訊