javascript jquery 选项卡的 onclick 事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17144087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 07:14:47  来源:igfitidea点击:

onclick event for jquery tabs

javascriptjqueryhtml

提问by Steven Barrett

I have tabs inside tabs. What I wan to do is set a variable to something once a tab is clicked. so if the brush tab is clicked then that var is set to true, if the pencil tab is selected the others are set to false and this is set to true.

我在标签内有标签。我想要做的是在单击选项卡后将变量设置为某物。因此,如果单击画笔选项卡,则该 var 设置为 true,如果选择了铅笔选项卡,则其他选项设置为 false,并将此设置为 true。

Now I assume you must have an on click event attached to the tabs and when clicked it will call a function. My problem is how to put a on click event for each tab? Her is a live example of what I have done: http://www.taffatech.com/Paint.html

现在我假设你必须有一个附加到选项卡的点击事件,点击它会调用一个函数。我的问题是如何为每个标签放置一个点击事件?她是我所做的一个活生生的例子:http: //www.taffatech.com/Paint.html

here is my html code for the tabs:

这是我的标签页的 html 代码:

<div id="tabs" style=" position:absolute; right:20; top: 30; z-index: 1; ">
  <ul>
    <li><a href="#tabs-1">Paint</a></li>
    <li><a href="#tabs-2">Shapes</a></li>
    <li><a href="#tabs-3">Save/Submit</a></li>
    <li><a href="#tabs-4">About</a></li>
  </ul>
  <div id="tabs-1">
  <div id="accordion">

    <h3>Brush</h3>
    <div>
    <center>
      <p>Brush Size</p>
    <div id="sliderBrush"></div>
    <div id="Total">10</div>

<p id="colorpickerHolder" >
                </p>

    </center>
    </div>

    <h3>Pencil</h3>
      <div>
    <center>
      <p>Pencil Size</p>
    <div id="sliderPencil"></div>
    <div id="TotalPencil">10</div>

<p id="colorpickerHolderPencil" >
                </p>

    </center>
    </div>

    <h3>Eraser</h3>
    <div>
     Coming soon!
    </div>

  </div>
</div>

回答by Suresh Atta

See API

见API

beforeActivate( event, ui ) 

Triggered immediately before a tab is activated.

在选项卡被激活之前立即触发。

    $( "#tabs-1" ).on( "tabsbeforeload", function( event, ui ) {
            //control comes here when you clicked on tab 1
    } )

http://api.jqueryui.com/tabs/#event-beforeLoad

http://api.jqueryui.com/tabs/#event-beforeLoad