需要調用jQuery文件
<script>
//獲取url地址欄中的參數值
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
//獲取url地址欄3個參數
var style_anli = getUrlParam('style_anli');
var model_anli = getUrlParam('model_anli');
var package = getUrlParam('package');
$(document).ready(function(){
//給當前選中各個參數按鈕加css樣式,高亮顯示當前選中條件
$("#style_anli"+style_anli).addClass("on");
$("#model_anli"+model_anli).addClass("on");
$("#package"+package).addClass("on");
//更新隱藏的form表單值
$("#style_anli").val(style_anli);
$("#model_anli").val(model_anli);
$("#package").val(package);
});
//點擊某個篩選菜單,觸發form表單提交
function setProps(objid,value){
$("#"+objid).val(value);
$("#qRooms").submit();
}
</script>
//隱藏的form表單,通過點擊調用js改變值
<form action="/index.php" id="qRooms" method="get">
<input type="hidden" name="m" value="content" id="m"/>
<input type="hidden" name="c" value="index" id="c"/>
<input type="hidden" name="a" value="lists" id="a"/>
<input type="hidden" name="catid" value="10" id="catid"/>
<input type="hidden" name="style_anli" value="" id="style_anli"/>
<input type="hidden" name="model_anli" value="" id="model_anli"/>
<input type="hidden" name="package" value="" id="package"/>
</form>
html菜單部分:
<ul class="casStyle">
<li><a href="javascript:setProps('style_anli',0);" id="style_anli0">現代簡約</a></li>
<li><a href="javascript:setProps('style_anli',1);" id="style_anli1">鄉村田園</a></li>
<li><a href="javascript:setProps('style_anli',2);" id="style_anli2">地中海</a></li>
<li><a href="javascript:setProps('style_anli',3);" id="style_anli3">混搭</a></li>
<li><a href="javascript:setProps('style_anli',4);" id="style_anli4">歐式</a></li>
<li><a href="javascript:setProps('style_anli',5);" id="style_anli5">中式</a></li>
<li><a href="javascript:setProps('style_anli',6);" id="style_anli6">北歐</a></li>
<li><a href="javascript:setProps('style_anli',7);" id="style_anli7">日式</a></li>
</ul>
//拼接url地址欄的值,組合成sql條件,傳給phpcms的where參數
<?php
if($_GET['style_anli']!=""){
$style_anli=" and style_anli=".$_GET['style_anli'];
}
if($_GET['model_anli']!=""){
$model_anli=" and model_anli=".$_GET['model_anli'];
}
if($_GET['package']!=""){
$package=" and package=".$_GET['package'];
}
$sql="catid=10 ".$style_anli.$model_anli.$package;
//數據庫中“風格”字段存的是數字,所以這裏再定義一個數組,跟數據庫順序一致,方便模板中調用。
$fengge=array('現代簡約','鄉村田園','地中海','混搭','歐式','中式','北歐','日式','美式','新古典','其他');
?>
{pc:content action="lists" catid="$catid" where="$sql" num="9" order="listorder DESC" page="$page" moreinfo="1" }
{loop $data $r}
...........
分頁問題:
通過js改變,phpcms程序默認的分頁href值,給href值追加參數。
<script>
var zone = getUrlParam('zone');
var fenye=document.getElementById("fenyeurl").getElementsByTagName("a");
for(var i=1;i<fenye.length;i++){
fenye[i].href+="&zone="+zone;
}
</script>