stackoom
  简体   繁体   中英

css, button selection and html tags

 原文  2011-03-06 16:52:00  5   2    asp.net/ html/ css/ xml/ xhtml

Question

<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.

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">&nbsp;</span></li>
                        <li><a href="DietPlan.aspx">My Diet Plan</a><span class="sep">&nbsp;</span></li>
                        <li><a href="WorkoutPlan.aspx">My Workout Plan</a><span class="sep">&nbsp;</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; }

2 answers

solution1
 2  2011-03-06 17:16:19

Define a selected class in your css. ex: 

.selected{
background:red;
}

Using jQuery you can do this. 

$('li').click(function() {
    $('li').removeClass('selected');
    $(this).addClass('selected');
});

Now only the clicked li link will have the class="selected" and therefore the background red.

Check working example at http://jsfiddle.net/MRVpD/

solution2
 2 ACCPTED  2011-03-06 18:52:25

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">&nbsp;</span>
    </li>
    <li <%=CurrentPage == "DietPlan" ? "class=\"first active first-active\"" : "" %>>
      <a href="DietPlan.aspx">My Diet Plan </a>
      <span class="sep">&nbsp;</span></li>
    <li <%=CurrentPage == "WorkOutPlan" ? "class=\"first active first-active\"" : "" %>>
      <a href="WorkoutPlan.aspx">My Workout Plan</a>
      <span class="sep">&nbsp;</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.

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">&nbsp;</span></li>
    <li><a href="DietPlan.aspx">My Diet Plan </a><span class="sep">&nbsp;</span></li>
    <li><a href="WorkoutPlan.aspx">My Workout Plan</a><span class="sep">&nbsp;</span></li>
    <li><a href="#">Research</a><span class="sep">&nbsp;</span></li>
    <li><a href="#">Research</a><span class="sep">&nbsp;</span></li>
</ul>

DietPlan.aspx would be like this... 

<ul>
    <li><a href="UserProfileWall.aspx">My Profile</a><span class="sep">&nbsp;</span></li>
    <li class="first active first-active"><a href="DietPlan.aspx">My Diet Plan </a><span class="sep">&nbsp;</span></li>
    <li><a href="WorkoutPlan.aspx">My Workout Plan</a><span class="sep">&nbsp;</span></li>
    <li><a href="#">Research</a><span class="sep">&nbsp;</span></li>
    <li><a href="#">Research</a><span class="sep">&nbsp;</span></li>
</ul>

And so on for the rest of your pages..

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.

This could be done via javascript as well (untested). 

$(function(){
     $("a[href='<%=System.IO.Path.GetFileName(Request.PhysicalPath)%>']").parent().addClass("first active first-active");
});

Which should generate something like this: 

$(function(){
  $("a[href='DietPlan.aspx']").parent().addClass("first active first-active");
});

Update

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");
});

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question make a CSS HTML button Additional html tags with dynamic radio button Html button CSS changes in Aspx Remove style tags, CSS, scripts and HTML tags from HTML to plain text HTML: changing the default selection dependant on a button click on a different page HTML input type radio button not showing selection on page load How I can use HTML and CSS Tags with a C# Event? Unable to remove HTML tags from a string that has a 'aspNetHidden' CSS class Trim HTML tags of a table cell with radio button and label combined radio button return through inner html in c# file for answer selection
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM