導航:首頁 > 萬維百科 > 網站右側列表欄設計

網站右側列表欄設計

發布時間:2020-11-09 23:09:06

1、html怎麼設計 左側是菜單欄,點擊不同的菜單選項在右側出現相應的內容?

大致思路
左側:菜單,給每個菜單設置id和onclick點擊事件,onclick事件觸發的函數假設寫為display()
右側:寫個固定樣式的div,id假設設置為board。


如果你的菜單內容在伺服器
display()的實現如下
function display(){
    $.ajax({
    type: "POST",
    url: 菜單所請求的內容地址,
    data: this.id等等相關的請求標志,
    success: funtion(data){$('board').html(data)},//返回數據填充
    dataType: dataType});
}


如果菜單內容寫死在頁面內
那麼右側:寫和菜單數一樣多的div,把所有的display屬性設置為none


同時display()的實現如下
function display(){
    $('#'+$(this).attr('rel')).style.display='block'
}


以上,偽代碼,僅供參考

2、網頁設計中列表/菜單問題:一個項目多個值

<form method="post" name="myform">
<select name="classid" onChange="select()"></select>
<select name="suid"></select>
</form>
<script language="javascript">
<!--
var arrText = new Array(5);
var arrValue = new Array(arrText.length);

function objSetOption(select1, select2) {
this.select1 = select1;
this.select2 = select2;
}

arrText[0]= new objSetOption("選擇1:", "選擇2_1:,選擇2_2:");
arrText[1] = new objSetOption("論文:1", "語文:1,數學:2,英語:3");
arrText[2] = new objSetOption("例題:2", "顯示b2_1:值b2_1,顯示b2_2:值b2_2");
arrText[3] = new objSetOption("顯示c:值c", "顯示c2_1:值c2_1,顯示c2_2:值c2_2");
arrText[4] = new objSetOption("顯示d:值d", "顯示d2_1:值d2_1,顯示d2_2:值d2_2");
arrText[5] = new objSetOption("顯示e:值e", "顯示e2_1:值e2_1,顯示e2_2:值e2_2");

function select(sValue1, sValue2) {
var eltSelect1 = document.myform.classid;
var eltSelect2 = document.myform.suid;
var arrSelect1, arrSelect2;
var arrData1, arrData2;
with(eltSelect1) {
var strSelect = options[selectedIndex].value;
}
for(i = 0;i < arrText.length;i ++) {
arrSelect1 = arrText[i].select1;
arrData1 = arrSelect1.split(":");
if (arrData1[1] == strSelect) {
arrSelect2 = (arrText[i].select2).split(",");
for(j = 0;j < arrSelect2.length;j++) {
arrData2 = arrSelect2[j].split(":");
with(eltSelect2) {
length = arrSelect2.length;
options[j].text = arrData2[0];
options[j].value = arrData2[1];
if (arrData2[1] == sValue2) {
options[j].selected = true;
}
}
}
break;
}
}
}

function init(sValue1, sValue2) {
var eltSelect1 = document.myform.classid;
var eltSelect2 = document.myform.suid;
var arrSelect1, arrSelect2;
var arrData1, arrData2;
if (eltSelect1 != undefined && eltSelect2 != undefined) {
with(eltSelect2) {
arrSelect2 = (arrText[0].select2).split(",");
length = arrSelect2.length;
for(i = 0;i < length;i ++) {
arrData2 = arrSelect2[i].split(":");
options[i].text = arrData2[0];
options[i].value = arrData2[1];
}
}
with(eltSelect1) {
length = arrText.length;
for(i = 0;i < arrText.length;i ++) {
arrSelect1 = arrText[i].select1;
arrData1 = arrSelect1.split(":");
options[i].text = arrData1[0];
options[i].value = arrData1[1];
if (arrData1[1] == sValue1) {
options[i].selected = true;
select("", sValue2);
}
}
}
}
}

//init();
//默認初始化

init("2", "值b2_1");
//更改後默認初始化
// -->
</script>

用這個試試?把裡面的的數據改成你所需要的就是了。
我用JavaScript運行過,應該沒問題。

3、網站設計 導航欄右側出來一塊.....

DIV你把寬度設置小一點就可以了

4、有個網頁固定右側欄的設計問題

這位網友你好,你說的圖標是因為你引用了font-awesome.min文件,所以才會有的,具體的所有圖標的類名,你可以參考一下官網:http://fontawesome.io/icons/
你說的滑鼠浮上去出現文字的那種效果,其實是用了絕對定位屬性,也就是position:absolute;,只是先把文字隱藏,滑鼠浮上去的時候出現。

5、網頁設計問題,把通用右側欄換到左側!

看你原來是用什麼代碼才行啊,,,

如果用TABLE的話,直接把兩邊的TD里的內容對調就可以了。

如果用DIV,這要看你CSS是怎麼定義,是浮動還是別的方式並排。

6、左側頁面菜單欄樣式設計

俺做過類似的功能, 左邊固定一個treeview,右邊放一個容器控制項, 點擊左邊的treeview節點的時候根據節點的不同,用反射機制創建一個你要的控制項(就是右邊的那一部分,你事先已經做成用戶控制項),然後調用 右邊容器的Controls.Add方法,把你剛才的創建那個控制項放進去並顯示出來就OK了。

7、有什麼可以設計菜單的網站嗎?

蠻多的啊,什麼豬八戒、千圖、靈貓之類的。但是我覺得你可以跟別人借鑒,不要生搬硬套

與網站右側列表欄設計相關的知識