纯手写html+css三级联动菜单-HostJL-VPS主机交流

HTML代码部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>ttt</title>
    <link rel="stylesheet" href="css.css">	
	<script src="https://www.somode.com/public/js/jquery.min.js"></script>
</head>
<body>
<div class="show-search">
    <form action="" method="get">
        <div>U盘启动快捷查询：</div>
        <select id='ST_1' name="pc_type">
            <option>请选择电脑类型</option>
            <option value='pid_2'>品牌台式电脑</option>
            <option value='pid_3'>组装台式电脑</option>
            <option value='pid_1'>品牌笔记本</option>
        </select>
        <select id='ST_2'>
            <option>请选择电脑品牌</option>
            <option class='pid_1' value='F9'>惠普笔记本</option>
            <option class='pid_1' value='F12'>联想Thinkpad</option>
            <option class='pid_1' value='F12'>戴尔笔记本</option>
            <option class='pid_1' value='F12'>神舟笔记本</option>
            <option class='pid_1' value='F12'>东芝笔记本</option>
            <option class='pid_1' value='F12'>三星笔记本</option>
            <option class='pid_1' value='F12'>IBM笔记本</option>
            <option class='pid_1' value='F12'>富士通笔记本</option>
            <option class='pid_1' value='F12'>海尔笔记本</option>
            <option class='pid_1' value='F12'>方正笔记本</option>
            <option class='pid_1' value='F12'>清华同方笔记本</option>
            <option class='pid_1' value='F11'>微星笔记本</option>
            <option class='pid_1' value='F9'>明基笔记本</option>
            <option class='pid_1' value='F12'>技嘉笔记本</option>
            <option class='pid_1' value='ESC'>索尼笔记本</option>
            <option class='pid_1' value='长按option'>苹果笔记本</option>
            <option class='pid_1' value='F12'>华硕笔记本</option>
            <option class='pid_1' value='F12'>宏基笔记本</option>
            <option class='pid_1' value='F12'>联想笔记本</option>
            <option class='pid_2' value='ESC'>戴尔台式机</option>
            <option class='pid_2' value='F12'>神州台式机</option>
            <option class='pid_2' value='F8'>华硕台式机</option>
            <option class='pid_2' value='F12'>方正台式机</option>
            <option class='pid_2' value='F12'>清华同方台式机</option>
            <option class='pid_2' value='F12'>海尔台式机</option>
            <option class='pid_2' value='F12'>宏基品牌台式</option>
            <option class='pid_2' value='F9或F12'>惠普品牌台式</option>
            <option class='pid_2' value='F12'>联想品牌台式</option>
            <option class='pid_3' value='ESC'>杰微主板</option>
            <option class='pid_3' value='F12'>致铭主板</option>
            <option class='pid_3' value='ESC'>馨正主板</option>
            <option class='pid_3' value='F9'>冠铭主板</option>
            <option class='pid_3' value='ESC或F11'>七彩虹主板</option>
            <option class='pid_3' value='F11'>华擎主板</option>
            <option class='pid_3' value='ESC'>斯巴达卡主板</option>
            <option class='pid_3' value='F11'>昂达主板</option>
            <option class='pid_3' value='ESC'>双敏主板</option>
            <option class='pid_3' value='F10'>翔升主板</option>
            <option class='pid_3' value='ESC或F11'>精英主板</option>
            <option class='pid_3' value='ESC或F12'>富士康主板</option>
            <option class='pid_3' value='F11或F12'>顶星主板</option>
            <option class='pid_3' value='ESC'>铭瑄主板</option>
            <option class='pid_3' value='F8'>盈通主板</option>
            <option class='pid_3' value='ESC'>捷波主板</option>
            <option class='pid_3' value='ESC或F12'>梅捷主板</option>
            <option class='pid_3' value='F9'>映泰主板</option>
            <option class='pid_3' value='F12'>微星主板</option>
            <option class='pid_3' value='F12'>技嘉主板</option>
            <option class='pid_3' value='F8'>华硕主板</option>
        </select>
        <span>温馨提示：</span><em id="idTipstxt">请选择左边电脑类型和品牌查看U盘启动快捷</em>
    </form>
	<script>
    $('#ST_1').change(function () {
        $('#ST_2 option:not(:first)').hide();
        var PID = $('#ST_1 option:selected').val();
        if (PID) {
            $("#ST_2 option:first").attr("selected", true);
            $('#idTipstxt').html(' 请在左侧选择电脑类型和品牌查看 ');
            $('.' + PID).show();
        }
    }).trigger('change');

    $('#ST_2').change(function () {
        var txt = $('#ST_2 option:selected').val();
        if (txt) {
            var code = "";
            $('#idTipstxt').html('一键u盘启动快捷键：<b style="color:#1A8EFF;">' + txt + '</b>' + code);
        } else {
            $('#idTipstxt').html('');
        }
    });
</script>
</div>
</body>
</html>

CSS部分：


.show-search {
    width: 1200px;
    margin: 10px auto;
    background: #FFF;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 5px #eee;
    position: relative;
    z-index: 200;
}

.show-search form {
    width: 90%;
    height: 60px;
    margin: 0 auto;
    position: relative;

    text-align: center;
    line-height: 60px;
}

.show-search form div {
    display: inline-block;
    font-size: 24px;
    float: left;
}

.show-search form select {
    font-size: 18px;
    margin-left: 15px;
    width: 225px;
    height: 44px;
    color: #999999;
    border-radius: 3px;
    float: left;
    margin-top: 9px;
}

.show-search form span, .show-search form em {
    font-size: 16px;
    float: left;
}

.show-search form span {
    margin-left: 27px;
    float: left;
}

.show-search form em {
    color: #1A9BFA;
    width: 250px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: right;
}

图片[1]-纯手写html+css三级联动菜单-HostJL-VPS主机交流

1、本站网址：hostjl.com
2、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

帝国CMS教程
# 三级联动 # 联动菜单

纯手写html+css三级联动菜单

搬瓦工VPS推荐方案