Question

我正在创建一个清单，我想知道是否有办法突出显示多次点击的行。因此，当您完成任务时，您将单击该行，它将更改颜色以指示部分完成或通过多次单击完全完成。此外，由于它将是一个清单，因此将同时选择多个列。

例如：在第一次单击时将行变为黄色，在第二次单击时将行变为绿色，然后在第三次单击时取消选择该行。

这可能吗？我似乎无法弄明白。

感谢。

这是我的代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CS Traffic Control</title>
<style type="text/css"> 

body {
  background: #f0f0f0;
  margin: 0;
  padding: 0;
  font: 12px Normal Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 425px; margin: 0px;}
ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px;
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  width: 100%;
}
ul.tabs li {
  float: left;
  margin: 0;
  padding: 0;
  height: 31px;
  line-height: 31px;
  border: 1px solid #999;
  border-left: none;
  margin-bottom: -1px;
  background: #e0e0e0;
  overflow: hidden;
  position: relative;
}
ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 1.2em;

  padding: 0 8px;
  border: 1px solid #fff;
  outline: none;
}

ul.tabs li a:hover {
  background: #ccc;
}

html ul.tabs li.active, html ul.tabs li.active a:hover {
  background: #fff;
  border-bottom: 1px solid #fff;
}
.tab_container {
  border: 1px solid #999;
  border-top: none;
  clear: both;
  float: left; 
  width: 100%;
  background: #fff;
  -moz-border-radius-bottomright: 5px;
  -khtml-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -khtml-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
  padding: 0px;
  font-size: 1.2em;
}
.tab_content h2 {
  font-weight: normal;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
  font-size: 1.8em;
}
.tab_content h3 a{
  color: #254588;
}
.tab_content img {
  float: left;
  margin: 0 20px 20px 0;
  border: 1px solid #ddd;
  padding: 5px;
}

.checklist
{
margin: 0 auto; 
background: #FFFFFF;
font: Normal 13px Arial;
color: #000000;
text-align: left;
top: 0px;
left: 0px;
}

.checklist .listItem
{
font: Normal 12px Arial;
border: solid 1px #CCCCCC;
background: #eefbfd;
position: relative;
height: 15px;
padding: 4px;
padding-left: 6px;
}

.checklist .listItem2
{
font: Normal 12px Arial;
border: solid 1px #CCCCCC;
background: #fdf0ed;
position: relative;
height: 15px;
padding: 4px;
padding-left: 6px;
}

.checklist .listItem3
{
font: Normal 12px Arial;
border: solid 1px #CCCCCC;
background: #edfdf7;
position: relative;
height: 15px;
padding: 4px;
padding-left: 6px;
}

.checklist .highlight
{
border: solid 1px #006600;
background: #99CC33;
}

.checklist .label
{
font: Bold 12px Arial;
border: solid 1px #999999;
background: #CCCCCC;
position: relative;
height: 15px;
padding: 2px;
padding-left: 6px;
}

.checklist .label2
{
font: Bold 12px Arial;
border: solid 1px #999999;
background: #CCCCCC;
position: relative;
height: 15px;
padding: 2px;
padding-left: 6px;
}

.checklist .label3
{
font: Bold 12px Arial;
border: solid 1px #999999;
background: #CCCCCC;
position: relative;
height: 15px;
padding: 2px;
padding-left: 6px;
}


</style>
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript"> 

$(document).ready(function() {

  //Default Action
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content

  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
  });

});
</script>

</head>

<body>

<div class="container">

    <ul class="tabs">
        <li class="active"><a href="#tab1">Pre-Event</a></li>
        <li class=""><a href="#tab2">Event Monitoring</a></li>
        <li class=""><a href="#tab3">Presentation Manager Training</a></li>        
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content" style="display: block;">
            <div class="checklist">
        <div class="label">The 24 Before</div>
        <div class="listItem">Verify Conference Reservation Matches Event date/time</div>
        <div class="listItem">Verify Passcode on conference reservation matches</div>
        <div class="listItem">Verify You Show up in Report URL</div>
        <div class="listItem">Is There a Non-Streaming Option?</div>
        <div class="listItem">Does EM Date Time Match CSS Calendar Invite Date/Time?</div>
        <div class="listItem">Select Your Name As Event Monitor In Event Manager</div>
        <div class="label">Console Check</div>
        <div class="listItem">All Elements are functional</div>
        <div class="listItem">Download Slides Match Uploaded Slides</div>
        <div class="listItem">Presenter Pictures Appear</div>
        <div class="listItem">Check Spelling/Grammar</div>
        <div class="listItem">Audio Events Have Media Player</div>
                <div class="listItem">Video Events have Video Window</div>
                <div class="listItem">Is it Go-Live Ready?</div>
        <div class="label">Presentation Manager Check</div>
        <div class="listItem">Verify Elements are uploaded</div>
        <div class="listItem">Push out elements to make sure they display in Audience Console</div>
        <div class="listItem">Do URLs Launch Correctly?</div>
        <div class="listItem">Do Polls Launch Correctly?</div>
        <div class="listItem">Does Screen Share Launch Correctly?</div>
        <div class="label">Registration</div>
        <div class="listItem">Did you get registration confirmation email?</div>
        <div class="listItem">Does registration page look Go-Live Ready?</div>
        <div class="listItem">Does Date/Time match event Date/Time?</div>
                <div class="label">Escalation</div>
        <div class="listItem">Post Comment in SFDC Case Pre-Check Complete</div>
        <div class="listItem">Telco - reservation is incorrect (date.time/faa passcode)</div>
        <div class="listItem">Event is FAA but EM Shows FAB</div>
                <div class="listItem">Post comment for WCM if anything is missing or incorrect</div>
                <div class="listItem">Do you understand the event profile and event flow?</div>
            </div>
        </div>
        <div id="tab2" class="tab_content" style="display: none;">
            <div class="checklist">
        <div class="label2">Event Start-Up</div>
        <div class="listItem2">Log into Event using URLs from WCC</div>
        <div class="listItem2">Verify Elements are Go-Live Ready</div>
        <div class="listItem2">Enter Dial-in Information in Chat</div>
                <div class="listItem2">Verify You Are Selected as Event Monitor in EM</div>
                <div class="listItem2">Open Preview URL and Verify it's Go-Live Ready</div>
                <div class="listItem2">Launch Audience URL and Verify Lobby Page opens</div>
                <div class="listItem2">Dial Out to Bridge</div>
                <div class="listItem2">Hit Start at Transition</div>
                <div class="listItem2">Push Out First Element</div>
        <div class="label2">Telco</div>
        <div class="listItem2">Log into Operator Chat</div>
                <div class="listItem2">Confirm FAA Passcode</div>
                <div class="listItem2">Confirm Title</div>
                <div class="listItem2">Confirm Standbys at 15,10,5,2 min</div>
                <div class="listItem2">Confirm Test Standby on Stream</div>
                <div class="listItem2">Confirm Open Lines</div>
                <div class="listItem2">Confirm Operator Understands Event Flow</div>
                <div class="listItem2">Provide Dial-Out Numbers for Presenters</div>
                <div class="listItem2">Confirm Start Time</div>
        <div class="label2">Presenters</div>
        <div class="listItem2">Confirm Each Person Roll</div>
        <div class="listItem2">Confirm Open Lines</div>
        <div class="listItem2">Perform Sound Checks</div>
        <div class="listItem2">Confirm Elements are in correct order</div>
                <div class="listItem2">Verify Screen Share is Functional</div>
                <div class="listItem2">Review Transition to Live Event Start</div>
                <div class="listItem2">Confirm Event Start Time</div>
                <div class="listItem2">Identify Backup Slide Pusher</div>
                <div class="listItem2">Remind to Stay On Call for Post-call Wrap-up</div>
                <div class="listItem2">Confirm Phone Numbers for Presenters</div>
        <div class="label2">Best Practices</div>
        <div class="listItem2">Slide Deck Printed Out</div>
        <div class="listItem2">Something to Drink Handy</div>
        <div class="listItem2">Silence all devices</div>
        <div class="listItem2">Do Not Use Mute Function</div>
                <div class="listItem2">Stay aware of Chat Window</div>
                <div class="listItem2">ON24 Answers All Tech Questions</div>
             </div>
         </div>
        <div id="tab3" class="tab_content" style="display: none;">
            <div class="checklist">
        <div class="label3">Pre-Call</div>
        <div class="listItem3">Verify Elements are Go-Live Ready</div>
                <div class="listItem3">Enter Dial-in Information in Chat</div>
                <div class="listItem3">Launch Arkadin Audio Console</div>
                <div class="listItem3">Label Incoming Caller Lines in Arkadoin Audio Console</div>
                <div class="label3">Review Login Mode(s)</div>
                <div class="listItem3">Review Login Page</div>
                <div class="listItem3">Log in as Moderator</div>
                <div class="listItem3">Changing Mode(s) via menu</div>
                <div class="label3">Managing Elements</div>
                <div class="listItem3">Review Present Tab - PM Classic</div>
                <div class="listItem3">Review Storyboard - PMXD</div>
                <div class="listItem3">Preview Window</div>
                <div class="listItem3">Live View Window</div>
                <div class="listItem3">Previewing Elements</div>
                <div class="listItem3">Pushing Elements using Buttons</div>
                <div class="listItem3">Manually Pushing Elements</div>
                <div class="label3">Polls/URLs/Flash Clips</div>
                <div class="listItem3">How to distinguish each</div>
                <div class="listItem3">Poll Question V Poll Result</div>
                <div class="listItem3">Pushing URLs</div>
                <div class="label3">Screen Share</div>
                <div class="listItem3">Default Window Size</div>
                <div class="listItem3">How to Select Yourself as Presenter</div>
                <div class="listItem3">Framing up Share Portion</div>
                <div class="listItem3">Activating Screen Share</div>
                <div class="listItem3">Pausing Screen Share</div>
                <div class="listItem3">Stopping Screen Share</div>
                <div class="label3">Team Chat</div>
                <div class="listItem3">Chats are Logged</div>
                <div class="listItem3">PVT Messages v Public Messages</div>
                <div class="listItem3">Audience Cannot See Chat</div>
                <div class="listItem3">BP - Keep Eye on Chat Window During Event</div>
                <div class="label3">Q&A</div>
                <div class="listItem3">All Questions are logged</div>
                <div class="listItem3">ON24 answers all tech Q's</div>
                <div class="listItem3">Incoming Q ordered numerically with medium priority</div>
                <div class="listItem3">Highest ID# is most recent question</div>
                <div class="listItem3">Identifying Who Submitted Question</div>
                <div class="listItem3">Prioritizing Questions</div>
                <div class="listItem3">Hiding Answered Questions</div>
                <div class="listItem3">Creating Folders - PMXD</div>
                <div class="listItem3">Assigning Questions to Presenters</div>
                <div class="listItem3">Utilities Column - PM Classic</div>
                <div class="listItem3">Refresh Button - PM Classic</div>
                <div class="listItem3">Answered Tab - PM Classic</div>
                <div class="label3">Best Practices</div>
                <div class="listItem3">Log into PM 30 min prior to event start time</div>
                <div class="listItem3">Use a Handset Connected to Landline Phone</div>
                <div class="listItem3">Printout of Slides</div>
                <div class="listItem3">Silence All Devices</div>
                <div class="listItem3">Stay aware of chat window</div>
                <div class="listItem3">Do Not Use Mute function on Phone</div>
                <div class="listItem3">Something to drink handy</div>
                <div class="listItem3">Delegating Backup Slide Pusher</div>
                <div class="listItem3">Verbal Cue if Needing Assistance</div>
    </div>
</div>

<script> 
    $("div").click(function () { 
      $(this).toggleClass("highlight"); 
    }); 
</script> 



</body></html>

Answer 1

有这样的吗？

$("tr").click(function() {
    var color = $(this).css("background-color");
    switch(color) {
        case "yellow":
            $(this).css("background-color", "green");
            break;
        case "green":
            $(this).css("background-color", "white");
            break;
        defalut:
            $(this).css("background-color", "yellow");
            break;
    }
});

实际上有很多方法可以做到这一点。这只是一个。它也是你的起点。

Answer 2

假设您正在使用具有表格布局的表格/ div：

$('#checklist-table tr').on('click', function () {
    var $row = $(this);

    if ($row.hasClass('half-click')) {
        $row.removeClass('half-click').addClass('full-click'); // Half check to full check
    }
    else if ($row.hasClass('full-click')) {
        $row.removeClass('full-click'); // Back to no check
    }
    else {
        $row.addClass('half-click'); // No check to half check
    }
});

我更喜欢使用类来设置样式，因此您可以轻松地在css中更改颜色等，而不是在未来需要更改颜色时深入研究javascript

Answer 3

你很亲密

更改最后一个div的onclick。

$("div.listItem").click(function () { 
    var $this=$(this);
    if($this.hasClass("half"))
    {
        $this.removeClass("half").addClass("highlight");
    }
    else if ($this.hasClass("highlight"))
    {
        $this.removeClass("highlight");
    }
    else{
        $this.addClass("half");
    }
    });

也添加了这个css。

.checklist .half
{
border: solid 1px #006600;
background: #ffff00;
}

您可以查看演示here。

需要帮助创建清单并突出显示HTML Javascript行

3 个答案: