导航:首页 > 万维百科 > 网站右侧列表栏设计

网站右侧列表栏设计

发布时间: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、有什么可以设计菜单的网站吗?

蛮多的啊,什么猪八戒、千图、灵猫之类的。但是我觉得你可以跟别人借鉴,不要生搬硬套

与网站右侧列表栏设计相关的知识