javascript - 在搜索框选项卡之间单击时，如何使它们保持事件状态？

Question

这是一个包含搜索框代码的jsfiddle:http://jsfiddle.net/m1ym110r/

我正在尝试创建一个带有选项卡的搜索框，这些选项卡在选择时会变为事件状态。单击选项卡时，我的搜索框会正确循环，但选项卡本身不会保持事件状态以表明它已被选中。

任何见解都将不胜感激，因为我已经被困在这个问题上有一段时间了，并且无法弄清楚为什么每次单击一个选项卡时选项卡都没有保持事件状态。

这是我的代码:

HTML

<div id="widget">
    <ul class="nav nav-tabs" id="tabs">
        <li><a href="#pubmed" onClick="expandcontent('sc1', this)">PubMed</a>
        </li>
        <li><a href="#databases" onClick="expandcontent('sc2', this)">Databases</a>
        </li>
        <li><a href="#uptodate" onClick="expandcontent('sc3', this)">UpToDate</a>
        </li>
        <li><a href="#ejournals" onClick="expandcontent('sc4', this)">E-Journals</a>
        </li>
        <li><a href="#ebooks" onClick="expandcontent('sc5', this)">E-Books</a>
        </li>
        <li><a href="#catalog" onClick="expandcontent('sc6', this)">Catalog</a>
        </li>
        <li><a href="#site" onClick="expandcontent('sc7', this)">Website</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="sc1">
            <div class="tab-content-inner">
                <form action="http://www.ncbi.nlm.nih.gov/pubmed?holding=umiamilib_fft" class="SSCentralSearchSearchForm" name="searchForm" method="post" target="new">
                    <input name="SS_LibHash" value="FY6AF6XB5M" type="hidden" />
                    <input name="locale" value="en-us" type="hidden" />
                    <input name="action" value="start" type="hidden" />
                    <input name="dbIDList" value="NPM" type="hidden" />
                    <input style="width:75%" class="SSCentralSearchSearchCriteria" value="" name="term" type="text" size="40" maxlength="1000" placeholder="Search PubMed" />
                    <input class="SSCentralSearchSearchTermSubmit" type="submit" value="Search" />
                </form>
            </div>
        </div>
        <div class="tab-pane" id="sc2">
            <div class="tab-content-inner">
                <form action="http://FY6AF6XB5M.cs.serialssolutions.com/results" class="SSCentralSearchSearchForm" name="searchForm" method="post" target="new">
                    <input name="SS_LibHash" value="FY6AF6XB5M" type="hidden" />
                    <input name="locale" value="en-us" type="hidden" />
                    <input name="action" value="start" type="hidden" />
                    <input name="dbIDList" value="RYA,ACG,DNW,AQP,FFV,RWY,GLY,BDR,IDH,BID,BZP,DNL,CUI,CUJ,CVD,CVR,QTP,CZQ,CZZ,DCL,DGT,NPM,4F6,BKL,RTO,FYW,5MB,5MA,EKG,EGQ,DOK,66L" type="hidden" />
                    <input class="SSCentralSearchSearchCriteria" value="" name="term" type="text" size="40" maxlength="300" style="width:75%;" placeholder="Search Databases" />
                    <select class="SSCentralSearchSearchType" name="field">
                        <option value="title">Title</option>
                        <option value="author">Author</option>
                        <option value="full_text">Full Text</option>
                        <option value="keyword" selected="selected">Keyword</option>
                        <option value="subject">Subject</option>
                        <option value="abstract">Abstract</option>
                        <option value="isbn">ISBN</option>
                        <option value="issn">ISSN</option>
                        <option value="any">Any</option>
                    </select>
                    <input name="catID" value="102527" type="hidden" />
                    <input class="SSCentralSearchSearchTermSubmit" type="submit" value="Search" />
                </form>
            </div>
        </div>
        <div class="tab-pane" id="sc3">
            <div class="tab-content-inner">
                <form action="http://www.uptodate.com/contents/search" class="SSCentralSearchSearchForm" name="searchForm" method="post" target="new">
                    <input name="SS_LibHash" value="FY6AF6XB5M" type="hidden" />
                    <input name="locale" value="en-us" type="hidden" />
                    <input name="action" value="start" type="hidden" />
                    <input style="width:75%" class="SSCentralSearchSearchCriteria" value="" name="term" type="text" size="40" maxlength="200" placeholder="Search UpToDate" />
                    <input class="SSCentralSearchSearchTermSubmit" type="submit" value="Search" />
                </form>
            </div>
        </div>
        <div class="tab-pane" id="sc4">
            <div class="tab-content-inner">
                <form class="form-search">
                    <input type="text" class="form-search" placeholder="Find E-Journals by title" />
                    <button type="submit" class="btn btn-mini">Go</button>
                </form>
                <form>
                    <label class="radio inline">
                        <input type="radio" name="SearchType" id="rbtnContains" value="Contains" checked>Contains</label>
                    <label class="radio inline">
                        <input type="radio" name="SearchType" id="rbtnBeginsWith" value="BeginsWith">Begins With</label>
                    <label class="radio inline">
                        <input type="radio" name="SearchType" id="rbtnExactMatch" value="ExactMatch">Exact Match</label>
                </form>
            </div>
        </div>
        <div class="tab-pane" id="sc5">
            <div class="tab-content-inner">
                <form class="form-search">
                    <input type="text" class="form-search" placeholder="Find E-Books by keyword, title or author" />
                    <button type="submit" class="btn btn-mini">Go</button>
                </form>
                <form>
                    <label>Search By:
                        <select name="Ntk">
                            <option value="Keyword" selected>Keywords</option>
                            <option value="Title">Title</option>
                            <option value="Author">Author</option>
                            <option value="Subject">Subject Heading</option>
                        </select>
                    </label> <a href="/search/external/ebooks">E-book Collections</a>

                </form>
            </div>
        </div>
        <div class="tab-pane" id="sc6">
            <div class="tab-content-inner">
                <form class="form-search">
                    <input type="text" class="form-search" placeholder="Search Catalog" />
                    <button type="submit" class="btn btn-mini">Go</button>
                </form>
                <form>
                    <label>Search By:
                        <select name="Ntk">
                            <option value="Keyword" selected>Keywords</option>
                            <option value="Title">Title</option>
                            <option value="Author">Author</option>
                            <option value="Subject">Subject Heading</option>
                            <option value="ISBN">ISBN/ISSN</option>
                            <option value="Call Number">Call Number</option>
                        </select>
                    </label> <a href="/search/external/catalog">Catalog Home</a>

                </form>
            </div>
        </div>
        <div class="tab-pane" id="sc7">
            <div class="tab-content-inner">
                <form action="http://calder.med.miami.edu/pages/search.html" id="site">
                    <input type="hidden" name="cx" value="002423873606424653806:kpmotam5cds">
                    <input type="hidden" name="cof" value="FORID:11">
                    <input id="searchbox" type="text" name="q" size="18" value="Search this site" maxlength=200 onFocus="value=''">&nbsp;</form>
            </div>
        </div>
    </div>
</div>

CSS

#widget {
    padding-top:5px;
    padding-bottom:20px;
}
#widget select {
    -webkit-appearance:menulist;
}
#widget {
    width:450px;
}
#widget #tabs {
    max-width:450px;
    height:21px;
    margin-bottom:0;
    font-size:12px;
    border-bottom:none;
}
#widget label, input[type="text"] {
    font-size:12px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans serif;
    font-weight:normal;
}
#widget #tabs li a {
    line-height:20px;
}
#widget #databases label {
    width:25%;
}
#widget #ejournals label {
    width:20%;
}
#widget .tab-content {
    max-width:405px;
    width:450px;
    height:75px;
    max-height:75px;
    margin:;
    padding-top:;
    vertical-align:middle;
    background-color:#de752f;
    border:1px solid #dcd6be;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    border-top-right-radius:4px;
    overflow:hidden;
}
#widget .nav-tabs > .active > a, #widget .nav-tabs > .active > a:hover {
    color:#F5E9B8;
    cursor:default;
    background-color:#de752f;
    border:none;
}
#widget .nav-tabs li a {
    max-height:24px;
    padding:4px 3px 4px 2px;
    color:#D9E0BF;
    ;
    background-color:#7B9A70;
    border:none;
}
#widget .nav-tabs li.active {
    color:#de752f;
}
#widget .nav-tabs li a:hover {
    color:#F5E9B8;
    background-color:#de752f;
    border:none;
}
#widget #tabs li {
    max-height:24px;
    padding-bottom:1px;
}
#widget .tab-content-inner {
    margin:18px 10px 18px 10px;
    line-height:2.0em;
}
#widget #databases .tab-content-inner {
    margin:6px 10px 5px;
}
#widget #ejournals .tab-content-inner {
    margin:6px 10px 5px;
}
#widget #pubmed .tab-content-inner {
    margin:14px 10px 5px;
}
#widget #ejournals .tab-content-inner {
    margin:6px 10px 5px;
}
#widget #catalog .tab-content-inner {
    margin:6px 10px 5px;
}
#widget #catalog .tab-content-inner label {
    margin-bottom:0;
    padding-top:4px;
    font-size:12px;
    display:inline-block;
    *display:inline;
    zoom:1;
    width:50%;
}
#widget #ebooks .tab-content-inner {
    margin:6px 10px 5px;
}
#widget #ebooks .tab-content-inner label {
    margin-bottom:0;
    padding-top:4px;
    font-size:12px;
    display:inline-block;
    *display:inline;
    zoom:1;
    width:50%;
}
#widget .tab-content-inner form {
    margin-bottom:0;
}
#widget select {
    margin:0;
    padding:0px;
    height:20px;
    width:70%;
    font-size:12px;
}
#widget .tab-content-inner form input[type="text"] {
    padding:2px 6px 1px;
    width:85%;
}
#widget #wdgtPatient-problem, #widget #wdgtIntervention {
    width:40%;
}
#widget #wdgtDrug-name {
    display:none;
}
#widget .tab-pane {
    margin-top:0px;
}
#widget label {
    color:#4F4F4F;
}
#widget a, #widget a:link, #widget a:visited {
    color:#0680CD;
}
.nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after {
    display:table;
    line-height:0;
    content:""
}
.nav-tabs:after, .nav-pills:after {
    clear:both
}
.nav-tabs>li, .nav-pills>li {
    float:left
}
.nav-tabs>li>a, .nav-pills>li>a {
    padding-right:12px;
    padding-left:12px;
    margin-right:2px;
    line-height:14px
}
.nav-tabs {
    border-bottom:1px solid #ddd
}
.nav-tabs>li {
    margin-bottom:-1px
}
.nav-tabs>li>a {
    padding-top:8px;
    padding-bottom:8px;
    line-height:20px;
    border:1px solid transparent;
    -webkit-border-radius:4px 4px 0 0;
    -moz-border-radius:4px 4px 0 0;
    border-radius:4px 4px 0 0
}
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
    color:#D9E0BF;
    cursor:default;
    background-color:#de752f;
    border:1px solid #ddd;
    border-bottom-color:transparent
}
.tab-content>.tab-pane, .pill-content>.pill-pane {
    display:none
}

JS

/***********************************************
 * DD Tab Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display (or "" if no corresponding tab content)]:
var initialtab = [1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle = 0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks = 0 //0 for no (default), 1 for yes


////////Stop editting////////////////

var previoustab = ""

if (turntosingle == 1) document.write('<style type="text/css">\n#tabs{display: none;}\n</style>')

function expandcontent(cid, aobject) {
    if (disabletablinks == 1) aobject.onclick = new Function("return false")
    if (document.getElementById && turntosingle == 0) {
        highlighttab(aobject)
        if (previoustab != "") document.getElementById(previoustab).style.display = "none"
        if (cid != "") {
            document.getElementById(cid).style.display = "block"
            previoustab = cid
        }
    }
}

function highlighttab(aobject) {
    if (typeof tabobjlinks == "undefined") collectddtabs()
    for (i = 0; i < tabobjlinks.length; i++)
    tabobjlinks[i].className = ""
    aobject.className = "current"
}

function collectddtabs() {
    var tabobj = document.getElementById("tabs")
    tabobjlinks = tabobj.getElementsByTagName("A")
}

function do_onload() {
    collectddtabs()
    expandcontent(initialtab[1], tabobjlinks[initialtab[0] - 1])
}

if (window.addEventListener) window.addEventListener("load", do_onload, false)
else if (window.attachEvent) window.attachEvent("onload", do_onload)
else if (document.getElementById) window.onload = do_onload

谢谢!!

Answer 1

我认为这就是您想要做的。我采取了完全不同的方法，你的代码到处都是。尽量避免 document.write。我使用了 jQuery，所以如果您希望它在您自己的个人网站上工作，您需要在标题顶部包含以下代码行(在调用所有 jQuery 函数或包含指向 jQuery 文件的外部链接之前) :

• <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here是我为你创建的 jsfiddle

这是我创建的代码:

JS

$(document).ready(function () {
    var numberOfTabs = $("#tabs>li").length;
    $("#tabs>li:eq(0)").addClass("active");
    $(".tab-pane").hide();
    $(".tab-pane:eq(0)").show();
    $("#tabs>li").click(function () {
        $("#tabs>li").removeClass("active");
        $(this).addClass("active");
        var index = $(this).index("#tabs>li");
        $(".tab-pane").hide();
        $(".tab-pane:eq(" + index + ")").show();
    });
});