Question

我在Dreamweaver中设置了jquery选项卡。它们在实时视图中工作正常，但在浏览器中没有。我不是程序员或网页设计师，所以请尽可能清楚地回答。这是我的代码：

<div id="tabs">
<ul>
  <li></li>
  <li></li>
  <li><a href="#tabs-1"></a>
     <div id="Tabs1">
        <ul>
           <li><a href="#tabs-6">text</a></li>
           <li><a href="#tabs-7">text2</a></li>
           <li><a href="#tabs-8">text3</a></li>
           <li><a href="#tabs-9">text4</a></li>
           <li><a href="#tabs-10">text5</a></li>
        </ul>
        <div id="tabs-6">
           <p><img src="/images/icons/dc.png" alt="text" width="72" height="74" border="0" class="alignleft" style="margin-right:15px; margin-bottom:40px;" />Description goes here.  <br/><br/>
  Another paragraph goes here.  <br/><br/>
  Third paragraph goes here. </p>
        </div>

- 遵循其余标签的文字 -

这是在HEAD标记内：

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
<link href="js/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/supposition.js"></script>
<script type="text/javascript" src="js/resolution.js"></script>
<!-- InstanceBeginEditable name="head" -->
<script src="/jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<!-- InstanceEndEditable -->
<script type="text/javascript">
function MM_validateForm() { //v4.0
  if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
  if (val) { nm=val.name; if ((val=val.value)!="") {
    if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
      if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
    } else if (test!='R') { num = parseFloat(val);
      if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
      if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
        min=test.substring(8,p); max=test.substring(p+1);
        if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
  } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

    function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Answer 1

你需要在这里调用标签功能，

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

参考： https://jqueryui.com/tabs/

语法： $(TargettingElement).tabs();

尝试小提琴： https://jsfiddle.net/tg76h23b/

jquery选项卡显示在Dreamweaver中但不在现场

1 个答案: