我对此很陌生,因此如果这个问题看起来很基本,请提前道歉!我很感激学习者,感谢能为我提供的所有帮助:)
我一直在尝试创建两个下拉菜单,这些菜单将作为内联元素显示在公司网站的首页上。看来Javascript已被禁止编辑(因为我以前尝试使用Codepen中的预制下拉菜单)。
我希望用户只需单击下拉菜单,然后他们单击的选项会将他们带到网站的相关部分。
这是我到目前为止创建的HTML。我希望将此下拉列表保留为HTML和CSS。
提前谢谢大家! :)
HttpWebRequest r = null;
HttpWebResponse rsp = null;
ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;
r = (HttpWebRequest)System.Net.WebRequest.Create("url");
String d = "Serialize JSON"
r.Method = "POST";
r.ContentType = "application/json";
StreamWriter wr = new StreamWriter(r.GetRequestStream());
wr.WriteLine(d);
wr.Close();
rsp = (HttpWebResponse)r.GetResponse();
StreamReader reader = new StreamReader(rsp.GetResponseStream());
String dd = reader.ReadToEnd();
答案 0 :(得分:1)
下面的代码段将起作用。这是一个带有有效链接的 codepen (点击 3dexperience )。
<div class=" col-xs-12 cold-md-6">
<select role="menu" id="dropdownMenuElement_10990" class="form-control input-lg" onchange="location = this.value;">
<option value="/">Looking for a product?</option>
<option value="/3dexperience">3DEXPERIENCE</option>
<option value="/catia">CATIA</option>
<option value="/enovia">ENOVIA</option>
<option value="/delmia">DELMIA</option>
<option value="/dymola">DYMOLA</option>
<option value="/reqtify">REQTIFY</option>
<option value="/controlbuild">CONTROLBUILD</option>
<option value="/exalead">EXALEAD</option>
<option value="/netvibes">NETVIBES</option>
<option value="/master-3dgage">MASTER 3DGAGE</option>
<option value="/verisurf">VERISURF</option>
</select>
</div>
答案 1 :(得分:0)
在更改select
上使用,然后将窗口滚动到要将部分ID设置为option值的div部分的ID
使用Jquery
$('#selectBox').change(function() {
var selectedValue = $(this).val();
var elem=$('#'+selectedValue)
$('html, body').scrollTop(elem.offset().top);
});
select{
position:fixed;
top:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=" col-xs-12 cold-md-6">
<select id="selectBox" role="menu" id="dropdownMenuElement_10990" class="form-control input-lg ">
<option value="/">Looking for a product?</option>
<option value="3dexperience">3DEXPERIENCE</option>
<option value="catia">CATIA</option>
<option value="enovia">ENOVIA</option>
<option value="delmia">DELMIA</option>
<option value="dymola">DYMOLA</option>
<option value="reqtify">REQTIFY</option>
<option value="controlbuild">CONTROLBUILD</option>
<option value="exalead">EXALEAD</option>
<option value="netvibes">NETVIBES</option>
<option value="master-3dgage">MASTER 3DGAGE</option>
<option value="verisurf">VERISURF</option>
</select>
</div>
<div id="lookingFor">
<h1>lookingFor</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="3dexperience">
<h1>3dexperience</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="catia">
<h1>catia</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="enovia">
<h1>enovia</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
答案 2 :(得分:0)
您似乎正在使用引导程序,并且由于只需要HTML和CSS解决方案,因此您应该使用引导程序文档中提供的代码:
示例:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#potato">Potato</a>
<a class="dropdown-item" href="#xxx">XXX</a>
<a class="dropdown-item" href="#zzz">ZZZ</a>
</div>
</div>
假设当您单击“土豆”时,您想要进入网站的“土豆”部分,您所要做的就是给土豆部分指定一个类似于上面链接中传递的href的ID,如果部分是外部页面,您只需在下拉菜单的href中传递页面上的链接即可。