我正在创建一个包含两列的布局。
一个人有图像和第二个内容。现在我想，只要用户点击图像，第二列中的内容就会发生变化。
HTML
<div class="col-sm-6">
<div class="row" style="width: 75%;margin: 0 auto;">
<div class="col-xs-6">
<a href="#" class="p1"><span id="image1"><b>Planning</b></span></a>
</div>
<div class="col-xs-6">
<a href="#" class="p2"><span id="image2"><b>Results</b></span></a>
</div>
</div><br>
<div class="row" style="width: 75%;margin: 0 auto;">
<div class="col-xs-6">
<a href="#" class="p3"><span id="image3"><b>Improvements</b></span></a>
</div>
<div class="col-xs-6">
<a href="#" class="p4"><span id="image4"><b>Communication</b></span></a>
</div>
</div>
<div class="st">
<div class="planning">
<h3>Planning</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
<div class="results">
<h3>Results</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
<div class="improvements">
<h3>Improvements</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
<div class="communication">
<h3>Communication</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
</div>
</div>
<div class="col-sm-6 how-text">
</div>
CSS
.st { display:none; }
.how-text { min-height: 300px;
height: auto;
background-color: #e6ebe4;
padding: 20px;
margin: 25px 0px 10px 0px;
border-radius: 3px; }
Jquery
$(document).ready(function() {
$('.p1').click(function(){
$('.how-text').html($('.planning').html());
});
$('.p2').click(function(){
$('.how-text').html($('.results').html());
});
$('.p3').click(function(){
$('.how-text').html($('.improvements').html());
});
$('.p4').click(function(){
$('.how-text').html($('.communication').html());
});
});
在小提琴中尝试自己
答案 0 :(得分：2)
答案 1 :(得分：1)
你可以访问div内部，因为它没有显示。 你可以用
public class MyService extends Service {
int id=1;
private ProgressDialog pd;
Bitmap image=null;
private static final int MY_NOTIFICATION_ID=1;
NotificationManager notificationManager;
private NotificationManager mNotifyManager;
Notification myNotification;
private android.support.v7.app.NotificationCompat.Builder mBuilder;
RemoteViews contentView;
Thread t;
public MyService() {
}
@Override
public IBinder onBind(Intent intent) {
// TODO: Return the communication channel to the service.
throw new UnsupportedOperationException("Not yet implemented");
}
@Override
public int onStartCommand(Intent intent, int flags, int startId) {
// Let it continue running until it is stopped.
String path;
int i=0;
path = intent.getExtras().getString("key");
Toast.makeText(this, "Service Started"+path, Toast.LENGTH_LONG).show();
Log.e("Service started=" + path, "service");
image= decodeFile(path);
startNotification();
/* pd = new ProgressDialog(MyService.this);
pd.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
pd.setMessage("Uploading Picture...");
pd.setCanceledOnTouchOutside(true);
pd.setCancelable(true);
pd.show();
pd.setProgress(0);*/
uploadPhoto(image);
// boolean status= isMyServiceRunning();
/* if(!status)//if false
{
myNotification = new NotificationCompat.Builder(getApplicationContext())
.setContentTitle("Cookbook Upload")
.setContentText("Upload Completed")
.setTicker("Cookbook Upload")
.setWhen(System.currentTimeMillis())
.setDefaults(Notification.DEFAULT_SOUND)
.setAutoCancel(true)
.setSmallIcon(R.drawable.ic_launcher)
.build();
notificationManager.notify(MY_NOTIFICATION_ID, myNotification);
}*/
return START_STICKY;
}
private void startNotification() {
NotificationManager notificationManager =
(NotificationManager) getSystemService(NOTIFICATION_SERVICE);
int icon = R.drawable.ic_launcher;
CharSequence notiText = "Your notification from the service";
long meow = System.currentTimeMillis();
Notification notification = new Notification(icon, notiText, meow);
Context context = getApplicationContext();
CharSequence contentTitle = "Cookbook Upload";
CharSequence contentText = "Upload in Progress";
//PENDING INTENT
Intent notificationIntent = new Intent(this, ImageViewActivity.class);
notificationIntent.putExtra("FROM_NOTIFICATION", true);
// notificationIntent.putExtra("first_state", 2);
PendingIntent contentIntent = PendingIntent.getActivity(this, 0, notificationIntent, PendingIntent.FLAG_UPDATE_CURRENT);
notification.setLatestEventInfo(context, contentTitle, contentText, contentIntent);
int SERVER_DATA_RECEIVED = 1;
notificationManager.notify(SERVER_DATA_RECEIVED, notification);
}
private void EndNotification() {
NotificationManager notificationManager =
(NotificationManager) getSystemService(NOTIFICATION_SERVICE);
int icon = R.drawable.ic_launcher;
CharSequence notiText = "Your notification from the service";
long meow = System.currentTimeMillis();
Notification notification = new Notification(icon, notiText, meow);
Context context = getApplicationContext();
CharSequence contentTitle = "Cookbook Upload";
CharSequence contentText = "Upload Completed";
//PENDING INTENT
Intent notificationIntent = new Intent(this, ImageViewActivity.class);
notificationIntent.putExtra("Complete_message", 1);
// notificationIntent.putExtra("first_state", 2);
PendingIntent contentIntent = PendingIntent.getActivity(this, 0, notificationIntent, PendingIntent.FLAG_UPDATE_CURRENT);
notification.setLatestEventInfo(context, contentTitle, contentText, contentIntent);
int SERVER_DATA_RECEIVED = 1;
notificationManager.notify(SERVER_DATA_RECEIVED, notification);
}
private void uploadPhoto(Bitmap bitmap) {
//in this method you upload the photo to the server: omitted for brevity
final Bitmap bit=bitmap;
//
/* int[] progress = new int[0];
pd.setProgress((int) (progress[0]));*/
//
t = new Thread("MyService") {
@Override
public void run() {
try {
Log.e("Service started", "service");
HttpClient httpClient = new DefaultHttpClient();
HttpContext localContext = new BasicHttpContext();
HttpPost httpPost = new HttpPost(Config.FILE_UPLOAD_URL);
MultipartEntity entity = new MultipartEntity(HttpMultipartMode.BROWSER_COMPATIBLE);
ByteArrayOutputStream bos = new ByteArrayOutputStream();
bit.compress(Bitmap.CompressFormat.JPEG, 100, bos);
byte[] data = bos.toByteArray();
entity.addPart("uploaded_file", new ByteArrayBody(data,
"myImage.jpg"));
httpPost.setEntity(entity);
HttpResponse response = httpClient.execute(httpPost,
localContext);
BufferedReader reader = new BufferedReader(
new InputStreamReader(
response.getEntity().getContent(), "UTF-8"));
StringBuilder builder = new StringBuilder();
String aux = "";
while ((aux = reader.readLine()) != null) {
builder.append(aux);
}
String sResponse = builder.toString();
} catch (Exception e) {
Log.e(e.getClass().getName(), e.getMessage(), e);
}
stopSelf();
}
};
t.start();
}
public Bitmap decodeFile(String filePath) {
// Decode image size
BitmapFactory.Options o = new BitmapFactory.Options();
o.inJustDecodeBounds = true;
BitmapFactory.decodeFile(filePath, o);
final int REQUIRED_SIZE = 1024;
int width_tmp = o.outWidth, height_tmp = o.outHeight;
int scale = 1;
while (true) {
if (width_tmp < REQUIRED_SIZE && height_tmp < REQUIRED_SIZE)
break;
width_tmp /= 2;
height_tmp /= 2;
scale *= 2;
}
o.inJustDecodeBounds = false;
// Decode with inSampleSize
BitmapFactory.Options o2 = new BitmapFactory.Options();
o2.inSampleSize = scale;
image= BitmapFactory.decodeFile(filePath, o2);
return image;
}
@Override
public void onDestroy() {
super.onDestroy();
t.interrupt();
EndNotification();
Toast.makeText(this, "Service Destroyed", Toast.LENGTH_LONG).show();
}
}
而不是display：none
https://jsfiddle.net/19suymt4/2/
它可以是您的解决方案
答案 2 :(得分：0)
您没有在代码中添加jquery。您还可以将4次点击事件缩小到单击事件：
$('a').click(function () {
$('.how-text').html($('.st div:eq('+$('.row > div').index($(this).parent())+')').html());
});
<强> Working Demo