在不使用制表符的情况下在jQuery对话框中浏览不同的内容 [英] Browsing different content in a jQuery dialog without using tabs
问题描述
我创建一个jQuery UI对话框,其中有3个按钮,以便我可以根据我点击的不同按钮在对话框中显示不同的内容。
I am creating a jQuery UI Dialog box, with 3 buttons in it, such that I can display different content in the dialog box according to the different buttons I have clicked.
在此之前,我设置了三个按钮来触发对话框。
And before that, I have set three buttons to trigger the Dialog box.
ie。
- 最初我有3个按钮
- 点击任何人都会导致一个对话框弹出
- 当点击按钮1,对话框中的按钮1将是粗体和将显示内容1。并且我可以通过点击对话框
中的按钮自由地切换内容 - 相应的按钮将是粗体,相应的内容将根据我点击的初始按钮显示
ie. - initially I have 3 buttons - click on anyone of them will lead to a dialog box popup - when click on button 1, the button 1 in the dialog box will be bold and the content 1 will be shown. and I can freely switch between contents by clicking the buttons in the dialog box - the respective button will be bold and respective content will be shown according to the initial button that I click on
我已经为它创建了一个demo(没有CSS样式,对不起)>>>>>>
JSFiddle
And I have created a demo for it (without CSS styling as those are too complicated to include, sorry)>>>>>> JSFiddle
$(document).ready(function(){
$('#helpDialogPop').dialog({
autoOpen:false,
modal: true
}).dialog("widget")
.next(".ui-widget-overlay")
.css("background", "black")
.css("opacity","0.9");
$('#pop1').click(function(){ $('#helpDialogPop').dialog('open'); });
$('#pop2').click(function(){ $('#helpDialogPop').dialog('open'); });
$('#pop3').click(function(){ $('#helpDialogPop').dialog('open'); });
});
其实我之前问过类似的问题,有人建议我使用tab,我想要的效果。所以我使用当前的方法来做到这一点。
Actually I have asked similar questions before and someone suggested me to use tab, but eventually using tabs cannot get the effect that I want. So I am using the current approach to do it.
我可以成功地显示按钮1的内容,但我不知道如何将内容定义为三个单独的按钮,这样他们就不会一起出现第一内容页。
And I can successfully display the content for button 1, but I don't know how to define the content into three separate buttons such that they won't appear together in the first content page.
还有一件事是,我不太确定是否应该使用div或一些单独的html页面来包含要显示的内容。
One more thing is that I am not quite sure about whether I should use a div or some separate html pages to contain the content to display.
请给我一些提示和指示。
Would anyone please give me some hints and direction please, thanks.
推荐答案
为3个不同的按钮创建3个不同的div,不需要单独的html
Create 3 different div for the 3 different buttons no seperate html is required
$(document).ready(function() {
$('li:first-child, #i1').click(function() {
$('#main button').css({
'display': 'inline-block'
});
$('#i1').addClass("active");
$('#i3,#i2').removeClass("active");
$('#info1').css({
'display': 'block'
});
$('#info2,#info3').css({
'display': 'none'
});
})
$('li:nth-child(2), #i2').click(function() {
$('#main button').show();
$('#i2').addClass("active");
$('#i1,#i3').removeClass("active");
$('#info2').css({
'display': 'block'
});
$('#info1,#info3').css({
'display': 'none'
});
})
$('li:nth-child(3), #i3').click(function() {
$('#main button').show();
$('#i3').addClass("active");
$('#i1,#i2').removeClass("active");
$('#info3').css({
'display': 'block'
});
$('#info2,#info1').css({
'display': 'none'
});
});
});
#info1,
#info2,
#info3 {
display: none;
position: absolute;
top: 70px;
background: #454545;
width: 300px;
height: 500px;
color: white;
}
.active {
background: green;
}
ul li {
display: inline-block;
list-style-type: none;
background: lightblue;
border: 1px solid black;
}
button {
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<ul>
<li>1nfo</li>
<li>info2</li>
<li>info3</li>
</ul>
<button id="i1">info1</button>
<button id="i2">info2</button>
<button id="i3">info3</button>
<div id="info1">description of info1</div>
<div id="info2">description of info2</div>
<div id="info3">description of info3</div>
</div>
这篇关于在不使用制表符的情况下在jQuery对话框中浏览不同的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!