css，按钮选择和html标签 [英] css, button selection and html tags
本文介绍了css，按钮选择和html标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/JScript.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/fns.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('li').removeClass("first active first-active");
$("a[href='DietPlan.aspx']").parent().addClass("first active first-active");
});
无法工作时仍会突出显示此标签。
Doesnt work still highlights the tab.
我的脚本包含在js / JScript.js中
my script contained in js/JScript.js
$(function () {
$("a[href='<%=System.IO.Path.GetFileName(Request.PhysicalPath)%>']").parent().addClass("first active first-active");
});
...
<ul>
<li><a href="UserProfileWall.aspx">My Profile</a><span class="sep"> </span></li>
<li><a href="DietPlan.aspx">My Diet Plan</a><span class="sep"> </span></li>
<li><a href="WorkoutPlan.aspx">My Workout Plan</a><span class="sep"> </span></li>
</ul>
css
/*----- Start "Main definitions" -----*/
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.2;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #a0a0a0;
background: url(images/bg.gif) repeat 0 0;
text-align: left;
}
a img { border: 0; }
a { color: #a0a0a0; text-decoration: underline; }
a:hover { text-decoration: none; }
.left { float: left; display: inline; }
.right { float: right; display: inline; }
.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.field { font-size: 12px; color: #484848; font-family: Arial, "Trebuchet MS", sans-serif; color: #000; border: solid 1px #a0a0a0; width: 140px; padding: 2px 5px; }
/*----- End "Main definitions" -----*/
.shell { width: 914px; margin: 0 auto; }
#page { padding-bottom: 30px; }
#header { width: 100%; position: relative; margin-bottom: 5px; }
#logo { text-transform: uppercase; line-height: 1; padding-bottom: 15px; }
#logo h1 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; font-size: 30px; color: #fff; }
#logo h1 a { color: #fff; text-decoration: none; }
#logo h1 a span { color: #7ab7e2; }
#logo .description { font-size: 10px; color: #cfd2d9; }
#top-nav { float: right; display: inline; margin-bottom: 2px; }
#top-nav ul { float: left; display: inline; font-size: 10px; line-height: 31px; color: #fff; text-transform: uppercase; background: url(images/top-nav-bg.jpg) repeat-x 0 0; }
#top-nav ul li { float: left; display: inline; list-style-type: none; }
#top-nav ul li a { float: left; display: inline; color: #fff; text-decoration: none; padding: 0 10px 0 8px; background: url(images/top-nav-sep.gif) no-repeat right 0; }
#top-nav ul li a:hover { text-decoration: underline; }
#top-nav ul li.last { padding-right: 4px; background: url(images/top-nav-last.gif) no-repeat right 0; }
#top-nav ul li.last a { background: none; }
#top-nav ul li.home { width: 88px; background: url(images/top-nav-home.gif) no-repeat 0 0; }
#top-nav ul li.home a { background: none; width: 67px; height: 31px; line-height: 29px; padding: 0; color: #141414; font-weight: bold; padding-left: 21px; }
#main-nav { float: right; display: inline; line-height: 32px; background: url(images/main-nav-bg.gif) repeat-x 0 0; }
#main-nav .bg-right { background: url(images/main-nav-bg-right.gif) no-repeat right 0; }
#main-nav .bg-left { background: url(images/main-nav-bg-left.gif) no-repeat 0 0; padding-left: 32px; width: 676px; }
#main-nav ul { height: 32px; font-size: 10px; color: #a8a8a8; text-transform: uppercase; }
#main-nav ul li { float: left; display: inline; list-style-type: none; background: url(images/main-nav-sep.gif) no-repeat right 0; }
#main-nav ul li a { float: left; display: inline; text-decoration: none; color: #a8a8a8; padding: 0 11px 0 9px; }
#main-nav ul li a:hover { text-decoration: underline; }
#sort-nav { line-height: 46px; background: url(images/sort-nav-bg.gif) repeat-x 0 0; }
#sort-nav .bg-left { background: url(images/sort-nav-bg-left.gif) no-repeat 0 0; position: relative; height: 46px; }
#sort-nav .bg-right { background: url(images/sort-nav-bg-right.gif) no-repeat right 0; position: relative; height: 46px; }
#sort-nav ul li { float: left; display: inline; list-style-type: none; height: 46px; }
#sort-nav ul li a { float: left; display: inline; font-size: 13px; font-weight: bold; color: #282828; text-decoration: none; padding: 0 19px; }
#sort-nav ul li span.sep { float: left; display: inline; width: 2px; height: 46px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(images/sort-nav-sep.gif); }
#sort-nav ul li a:hover { text-decoration: underline; }
#sort-nav ul li.active a { color: #fff; text-decoration: none; }
#sort-nav ul li.active a:hover { text-decoration: none; }
#sort-nav ul li.first-active a { background: url(images/nav-active-first.gif) no-repeat 0 0; }
#sort-nav ul li.active span.sep { background-image: url(images/nav-active-sep.gif); }
#sort-nav ul li.active { background: url(images/nav-active-bg.gif) repeat-x 0 0; }
#main { background: #050505 url(images/main-bg.gif) no-repeat 0 0; padding-top: 10px; }
#main-bot { background: url(images/main-bot-bg.gif) no-repeat 0 bottom; padding: 0 10px 2px 10px; height: 100%; position: relative; }
#sidebar { float: left; display: inline; width: 226px; }
#content { float: right; display: inline; width: 660px; }
.block { margin-bottom: 10px; background-repeat: no-repeat; background-position: 0 0; }
.block .block-bot { height: 100%; position: relative; background-repeat: no-repeat; background-position: 0 bottom; }
.block .block-cnt { padding: 10px 10px 10px 9px; }
.block .head { background: url(images/block-head.gif) no-repeat 0 0; padding-left: 15px; }
.block .head .head-cnt { background: url(images/block-head.gif) no-repeat right 0; line-height: 38px; height: 38px; padding-right: 13px; }
.block .head h3 { font-size: 15px; font-weight: bold; color: #262727; }
.block .head .view-all { float: right; display: inline; width: 61px; height: 18px; line-height: 16px; background: url(images/block-head-view-all.gif); margin-top: 12px; }
.block .head .view-all { color: #656565; font-size: 10px; text-decoration: none; text-align: center; }
.block .head .view-all:hover { text-decoration: underline; }
#content .block { background-image: url(images/content-block-top.gif); background-color: #313131; width: 657px; }
#content .block .block-bot { background-image: url(images/content-block-bot.gif); }
#sidebar .block { background-image: url(images/sidebar-block-top.gif); background-color: #484848; width: 226px; }
#sidebar .block .block-bot { background-image: url(images/sidebar-block-bot.gif); }
#search .block-cnt { padding: 5px 5px 5px 4px; }
#search .fieldplace { float: left; display: inline; width: 170px; height: 22px; background: url(images/search-field.gif) no-repeat 0 0; padding-left: 18px; }
#search .fieldplace .field { padding: 3px 6px 4px; width: 158px; border: none; background: none; }
#search .button { float: left; display: inline; width: 29px; height: 22px; font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; border: 0; }
#search .button { background: url(images/search-button.gif) no-repeat 0 0; }
#sign .block-cnt { padding: 6px 5px 5px 5px; }
#sign .button { display: block; font-size: 11px; font-weight: bold; text-align: center; color: #fff; text-decoration: none; text-transform: uppercase; line-height: 29px; }
#sign .button { width: 105px; height: 29px; background: url(images/sign-button.gif) no-repeat 0 0; }
#sign .button:hover { background-position: 0 bottom; }
#sign .button-left { float: left; display: inline; }
#sign .button-right { float: right; display: inline; }
#sign .center { text-align: center; font-size: 11px; line-height: 16px; margin-top: 4px; }
#sign .center a { color: #35cfd9; }
#sidebar .articles .article { padding: 8px 7px; background: url(images/sidebar-article-sep.gif) repeat-x 0 bottom; font-size: 11px; color: #a0a0a0; }
#sidebar .articles h4 { color: #fff; font-weight: bold; font-size: 12px; }
#sidebar .articles h4 a { color: #fff; text-decoration: none; }
#sidebar .articles h4 a:hover { color: #ccc; }
#sidebar .articles .view-all { font-size: 10px; letter-spacing: 0.5px; line-height: 24px; float: right; display: inline; margin-right: 6px; }
#sidebar .image-articles .image { float: left; display: inline; width: 55px; }
#sidebar .image-articles .image img { padding: 1px; border: solid 1px #1e1e1e; width: 208px;
height: 148px; }
#sidebar .image-articles .cnt { float: right; display: inline; width: 150px; }
#sidebar .text-articles .article { padding: 8px 10px; font-size: 12px; }
#sidebar .text-articles h4 { font-size: 13px; }
#content .articles h4 { font-size: 19px; font-weight: bold; color: #ccc; margin: 4px 0 2px; }
#content .articles h4 a { text-decoration: none; color: #ccc; }
#content .articles h4 a:hover { color: #fff; }
#content .col-articles .image img { padding: 1px; border: solid 1px #050505; width: 194px; height: 194px; }
#content .col-articles .article { float: left; display: inline; margin: 17px 0 10px 15px; width: 198px; }
#content .row-articles .article { padding: 10px 15px 12px 15px; background: url(images/content-article-sep.gif) repeat-x 0 bottom; }
#content .row-articles .last-article { background: none; }
#content .row-articles .image { float: left; display: inline; width: 194px; }
#content .row-articles .image img { width: 194px; }
#content .row-articles .cnt { float: right; display: inline; width: 420px; }
#content .row-articles h4 { margin-top: 0; line-height: 20px; }
#content .row-articles h4 a { color: #e4e4e4; }
#slider { width: 638px; height: 357px; position: relative; }
#slider .buttons { position: absolute; top: 250px; right: 15px; z-index: 101; }
#slider .buttons span { float: left; display: inline; width: 28px; height: 27px; font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; margin-left: 2px; }
#slider .buttons span.prev { background: url(images/button-prev.png) no-repeat 0 0; }
#slider .buttons span.next { background: url(images/button-next.png) no-repeat 0 0; }
#slider .holder { width: 638px; height: 357px; position: relative; overflow: hidden; }
#slider .content { height: 357px; width: 100000px; position: absolute; top: 0; left: 0; }
#slider .fragment { float: left; display: inline; width: 638px; height: 357px; list-style-type: none; }
#slider .fragment .image { position: relative; width: 638px; height: 287px; }
#slider .frame { width: 638px; height: 287px; position: absolute; top: 0; left: 0; z-index: 100; background: url(images/slider-image-bg.png) no-repeat 0 0; }
#slider .frame { font-size: 0; line-height: 0; text-indent: -4000px; }
#slider .fragment .cnt { margin-top: 5px; height: 49px; background: url(images/slider-cnt-bg.gif) repeat-x; color: #fff; font-size: 11px; line-height: 1.4; padding: 8px 15px; }
#slider .fragment .cnt .side-a { float: left; display: inline; width: 150px; }
#slider .fragment .cnt .side-b { float: right; display: inline; width: 430px; }
#slider .fragment .cnt h4 { font-size: 19px; font-weight: bold; color: #212121; text-transform: uppercase; margin-bottom: 5px; }
#slider .fragment .cnt .rating li { float: left; display: inline; list-style-type: none; font-size: 9px; color: #050505; text-transform: uppercase; margin-right: 1px; }
#slider .fragment .cnt .rating li .star { float: left; display: inline; width: 15px; height: 15px; font-size: 0; line-height: 0; text-indent: -4000px; }
#slider .fragment .cnt .rating li .empty-star { background: url(images/empty-star.gif); }
#slider .fragment .cnt .rating li .full-star { background: url(images/full-star.gif); }
#slider .fragment .cnt .rating li .votes { float: left; display: inline; margin-top: 3px; margin-left: 4px; }
#footer .copy { font-size: 10px; color: #363636; text-transform: uppercase; text-align: right; padding: 20px 0; }
#footer .copy a{ color: #363636; }
#footer .navs { background: #222 url(images/footer-navs-top.gif) no-repeat 0 0; text-align: center; font-size: 10px; text-transform: uppercase; color: #656565; height: 100%; position: relative; }
#footer .navs .navs-bot { background: url(images/footer-navs-bot.gif) no-repeat 0 bottom; height: 100%; position: relative; }
#footer .navs ul { margin: 10px 0; }
#footer .navs ul li { list-style-type: none; display: inline; padding: 0 6px; }
#footer .navs ul li a { color: #656565; text-decoration: none; }
#footer .navs ul li a:hover { text-decoration: underline; }
推荐答案
假设您的链接点击重新加载当前页面，
Assuming your link clicks reload the current page your "My Profile" tag will be always selected.
一个选项是通过服务器端脚本选择当前选项卡，这可以通过多种方式，但这里是一个选项。
如果菜单在母版页上，您需要定义一些方法来查找您在服务器端的哪个页面。
One option would be to select the current tab via server side script, this can be done many ways however here is one. If the menu is on a master page, you will need to define some way to find out which page you are on server side.
<ul>
<li <%=CurrentPage == "Profile" ? "class=\"first active first-active\"" : "" %>>
<a href="UserProfileWall.aspx">My Profile</a>
<span class="sep"> </span>
</li>
<li <%=CurrentPage == "DietPlan" ? "class=\"first active first-active\"" : "" %>>
<a href="DietPlan.aspx">My Diet Plan </a>
<span class="sep"> </span></li>
<li <%=CurrentPage == "WorkOutPlan" ? "class=\"first active first-active\"" : "" %>>
<a href="WorkoutPlan.aspx">My Workout Plan</a>
<span class="sep"> </span></li>
</ul>
这是所有的伪代码，但想法是你只想设置
This is all pseudo code, but the idea is you only want to set class="first active first-active" when you are on the current page via some sort of server side conditional.
如果菜单是通过某种类型的服务器端条件显示的，那么class =first active first-active UserProfileWall.aspx ， DietPlan.aspx 它有点更容易...
UserProfileWall.aspx 将是这样：
If the menu is on each page, UserProfileWall.aspx, DietPlan.aspx it is a bit easier...
UserProfileWall.aspx would be like this:
<ul>
<li class="first active first-active"><a href="UserProfileWall.aspx">My Profile</a><span class="sep"> </span></li>
<li><a href="DietPlan.aspx">My Diet Plan </a><span class="sep"> </span></li>
<li><a href="WorkoutPlan.aspx">My Workout Plan</a><span class="sep"> </span></li>
<li><a href="#">Research</a><span class="sep"> </span></li>
<li><a href="#">Research</a><span class="sep"> </span></li>
</ul>
DietPlan.aspx 会是这样。 ..
<ul>
<li><a href="UserProfileWall.aspx">My Profile</a><span class="sep"> </span></li>
<li class="first active first-active"><a href="DietPlan.aspx">My Diet Plan </a><span class="sep"> </span></li>
<li><a href="WorkoutPlan.aspx">My Workout Plan</a><span class="sep"> </span></li>
<li><a href="#">Research</a><span class="sep"> </span></li>
<li><a href="#">Research</a><span class="sep"> </span></li>
</ul>
等等。
现在，这只是一个方法，你也可以打破一个用户控件，例如当前页面的属性。
Now this is just one way you could also break this out to a user control that has a property as the current page for example.
这可以是
$(function(){
$("a[href='<%=System.IO.Path.GetFileName(Request.PhysicalPath)%>']").parent().addClass("first active first-active");
});
这应该生成如下：
$(function(){
$("a[href='DietPlan.aspx']").parent().addClass("first active first-active");
});
更新
在* .js文件中具有服务器脚本块将不会被.net（默认情况下）处理，请尝试更改以下内容：
更改：
Having server script blocks in your *.js files will not be processed by .net (by default), try changing the following: Change:
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/JScript.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/fns.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('li').removeClass("first active first-active");
$("a[href='DietPlan.aspx']").parent().addClass("first active first-active");
});
To：
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/JScript.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/fns.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("a[href='<%=System.IO.Path.GetFileName(Request.PhysicalPath)%>']").parent().addClass("first active first-active");
});
这篇关于css，按钮选择和html标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
